How to keep both DOM elements and template string of a component in angular2 & ionic2

Question

I use ionic2 & angular2 to build app, I want to define a custom component like ion-navbar, which can append title and buttons in it, just like:

<t-nav>
  <t-title>title for custom nav</t-title>
  <t-buttons></t-buttons>
</t-nav>

with a custom component

@Component({
  selector: 't-nav',
  template: '<div>dummy</div><div>dummy</div>'
})
export class TNav {
}

But after ionic build, the content in t-nav was missing, only remains

<t-nav>
<div>dummy</div><div>dummy</div>
</t-nav>

So can anybody tell me how does the angular2 framework keep DOM elements in ion-nav and ion-buttons while template is not empty?

Some code from ionic-angular package, nav.js, it seems template is not empty

Navbar.decorators = [
    { type: Component, args: [{
                selector: 'ion-navbar',
                template: '<div class="toolbar-background" [ngClass]="\'toolbar-background-\' + _mode"></div>' +
                    '<button (click)="backButtonClick($event)" ion-button="bar-button" class="back-button" [ngClass]="\'back-button-\' + _mode" [hidden]="_hideBb">' +
                    '<ion-icon class="back-button-icon" [ngClass]="\'back-button-icon-\' + _mode" [name]="_bbIcon"></ion-icon>' +
                    '<span class="back-button-text" [ngClass]="\'back-button-text-\' + _mode">{{_backText}}</span>' +
                    '</button>' +
                    '<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
                    '<ng-content select="ion-buttons[start]"></ng-content>' +
                    '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
                    '<div class="toolbar-content" [ngClass]="\'toolbar-content-\' + _mode">' +
                    '<ng-content></ng-content>' +
                    '</div>',
                host: {
                    '[hidden]': '_hidden',
                    'class': 'toolbar',
                    '[class.statusbar-padding]': '_sbPadding'
                }
            },] },
];

and also in html we can nest elements like

<ion-navbar>
     <button ion-button icon-only menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>

     <ion-title>
       Page Title
     </ion-title>

     <ion-buttons end>
       <button ion-button icon-only (click)="openModal()">
         <ion-icon name="options"></ion-icon>
       </button>
     </ion-buttons>
</ion-navbar>

Any help will be appreciate.

sebaferreras sebaferreras · Accepted Answer · 2017-09-21T05:24:47

@Component({
  selector: 't-nav',
  template: '<div>dummy</div><div>dummy</div>'
})
export class TNav {
}

That tells Angular that the template of the component is just <div>dummy</div><div>dummy</div>. If you want to transclude the html elements inside of the t-nav, you need to add <ng-content></ng-content> like this:

@Component({
  selector: 't-nav',
  template: `<!-- Dumy div -->
             <div>dummy</div>
             <!-- Content included beetween <t-nav>...</t-nav> -->
             <ng-content></ng-content>
             <!-- Another dummy div -->
             <div>dummy</div>`
})
export class TNav {
}

That will tell Agular to put whatever HTML elements are inside of the <t-nav>...</t-nav> (like t-title and t-buttons) where the ng-content is.

IMPORTANT: Just like you can see in this SO answer Mark Hartington from Ionic Team does not recommed to use a custom component as the navbar because it may lead to several issues and bugs.

How to keep both DOM elements and template string of a component in angular2 & ionic2

1 Answers