I am utilizing Ionic2 along with TypeScript. Let's assume I desire a custom component to include the content of an ion-menu.
<sidemenu></sidemenu> //This sidemenu will contain the ion.menu.
<ion-nav id="nav"
[root]="rootPage"
#content
swipe-back-enabled="false">
</ion-nav>
The sidemenu template:
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>{{ 'HELLO' | translate }}</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item
*ngFor="let p of DataMenu"
(click)="openPage(p)">
{{p.Title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
However, this setup will display the following HTML, disrupting the menu navigation, CSS styling, etc., causing the menu not to function properly.
<sidemenu>
<ion-menu>
...
</ion-menu>
</sidemenu>
<ion-nav>
...
</ion-nav>
What I intended was something like this:
<ion-menu>
...
</ion-menu>
<ion-nav>
...
</ion-nav>
Is it feasible to substitute the component with the template content? How can I go about creating custom components around the Ionic elements?