Replace component with its content when using custom components

Ionic Framework ionic-v3
1

Hello,

Lets assume i want a custom component to have the content of a ion-menu.

<sidemenu></sidemenu> //this sidemenu will hold the ion.menu.

<ion-nav id="nav"
         [root]="rootPage"
         #content
         swipe-back-enabled="false">
</ion-nav>

The sidemenu template is something like this:

<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>

But this will render the following html, breaking the menu navigation, css, etc… making the menu not to open.

<sidemenu>
   <ion-menu>
       ...
   </ion-menu>
</sidemenu>
<ion-nav>
    ...
</ion-nav>

It’s not possible to replace the component with the template content?
How can a create custom components around the ionic components?

2

Can someone help me?

Any thoughts?

3

I still have some problems with this… If I create a component around an ionic component it breaks the “chaining” and CSS around it.

Don’t know the best approach.

How can I do something like this?

4

Anyone? Can someone help me?

I don’t know how to do this… or create any custom component around ionic.

5

@hats

I think you have to read :

menu

and if you have an understanding tell me.