Ionic2 replace component selector with its content

Question

I'm using Ionic2 and typescript. 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:

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

When I wanted something like:

<ion-menu>
       ...
</ion-menu>
<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?

score 1 · Answer 1 · edited May 23 '17 at 12:02

How can a create custom components around the ionic components?

Please check my answer in this post. There you can see how to create a custom component for the navbar and how to modify it (if needed) in some pages.

=====================================================

EDIT:

It's not possible to replace the component with the template content?

Just like Tierry Templier says in this post

To quote the Angular 1 to Angular 2 Upgrade Strategy doc:

Directives that replace their host element (replace: true directives in Angular 1) are not supported in Angular 2. In many cases these directives can be upgraded over to regular component directives. In fact, it depends on what you want to do and you need to be aware that Angular2 supports several things:

Attribute directives - see https://angular.io/docs/ts/latest/guide/attribute-directives.html

Structural directives - see https://angular.io/docs/ts/latest/guide/structural-directives.html

So in your case, and just like Günter Zöchbauer suggests as a workaround you can use a selector in your component like

[myComponent]

and then use it like

<div myComponent>Hello My component</div>

or [my-component] and then use it like <div my-component>Hello My component</div>

Ionic2 replace component selector with its content

1 Answers1