typescript - Angular 2 export component into template -

i want create custom tabs component able display contents of [root] inside itself. works when use selectors in html tags (<tab1>), not know selector be. tabs components need way render component view

my tab.ts should display root component inside viewport

@component({     selector: 'tab',     template:       `<div [hidden]="!active">           <ng-content></ng-content>      </div>` }) export class tab {     @input('tabtitle') title: string;     @input() active = false;     @input('root') root: any; } 

then here tabs.ts glues tabs (enables switch between them)

@component({     selector: 'tabs',     template:       `<div class="tabbar">         <div class="tab-button" *ngfor="let tab of tabs"  (click)="selecttab(tab)">           <a href="#">{{tab.title}}</a>         </div>       </div>        <ng-content></ng-content>` })  export class tabs implements aftercontentinit {   @contentchildren(tab) tabs: querylist<tab>;    ngaftercontentinit() {     let activetabs = this.tabs.filter((tab) => tab.active);     if (activetabs.length === 0) {       this.selecttab(this.tabs.first);     }   }    selecttab(tab: tab) {     this.tabs.foreach(tab => tab.active = false);     tab.active = true;     if (this.menu) {       this.menu.active = false;     }   } } 

then have template should enable me use tabs , works in cases

<tabs>   <tab tabtitle="tab 1">     <tab-home></tab-home>   </tab>   <tab tabtitle="tab 2">     <tab-second></tab-second>   </tab>   <tab tabtitle="tab 3">     tab 3 content   </tab> </tabs> 

but @ end able this:

<tabs>   <tab *ngfor="let tab of tabs" [title]="tab.title">           {{ tab.component }}   </tab> </tabs> 

instead of tab.component need show rendered view of component without selector doesn't seem work.

so need way inject rendered view component template without directive (as never know directive be)

you can use local variable instead of directive @contentchildren

<some-component #tabitem></some-component> 

then pass variable name contentchildren string:

@contentchildren('tabitem')