title: Angular 2 export component into template
body: <p>I want to create custom Tabs component that will be able to display contents of [root] inside itself. 
  It works perfectly when I use selectors in html tags (<code>&lt;tab1&gt;</code>), but I do not always know what the selector would be. Tabs are basically components so I need a way to render component to the view</p>
  
  <p>My Tab.ts which should display the root component inside viewport</p>
  
  <pre><code>@Component({
      selector: 'tab',
      template: 
       `&lt;div [hidden]="!active"&gt;
            &lt;ng-content&gt;&lt;/ng-content&gt;
       &lt;/div&gt;`
  })
  export class Tab {
      @Input('tabTitle') title: string;
      @Input() active = false;
      @Input('root') root: any;
  }
  </code></pre>
  
  <p>Then here is Tabs.ts which glues tabs together (enables you to switch between them)</p>
  
  <pre><code>@Component({
      selector: 'tabs',
      template:
        `&lt;div class="tabbar"&gt;
          &lt;div class="tab-button" *ngFor="let tab of tabs"  (click)="selectTab(tab)"&gt;
            &lt;a href="#"&gt;{{tab.title}}&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;ng-content&gt;&lt;/ng-content&gt;`
  })
  
  export class Tabs implements AfterContentInit {
    @ContentChildren(Tab) tabs: QueryList&lt;Tab&gt;;
  
    ngAfterContentInit() {
      let activeTabs = this.tabs.filter((tab) =&gt; tab.active);
      if (activeTabs.length === 0) {
        this.selectTab(this.tabs.first);
      }
    }
  
    selectTab(tab: Tab) {
      this.tabs.forEach(tab =&gt; tab.active = false);
      tab.active = true;
      if (this.menu) {
        this.menu.active = false;
      }
    }
  }
  </code></pre>
  
  <p>Then I have this template that should enable me to use tabs and works in all cases</p>
  
  <pre><code>&lt;tabs&gt;
    &lt;tab tabTitle="Tab 1"&gt;
      &lt;tab-home&gt;&lt;/tab-home&gt;
    &lt;/tab&gt;
    &lt;tab tabTitle="Tab 2"&gt;
      &lt;tab-second&gt;&lt;/tab-second&gt;
    &lt;/tab&gt;
    &lt;tab tabTitle="Tab 3"&gt;
      Tab 3 content
    &lt;/tab&gt;
  &lt;/tabs&gt;
  </code></pre>
  
  <p>But at the end I would like do be able to do it like this: </p>
  
  <pre><code>&lt;tabs&gt;
    &lt;tab *ngFor="let tab of tabs" [title]="tab.title"&gt;      
      {{ tab.component }}
    &lt;/tab&gt;
  &lt;/tabs&gt;
  </code></pre>
  
  <p>Instead of tab.component I need to show the rendered view of component but without selector it doesn't seem to work. </p>
  
  <p>So I need a way to inject rendered view from component into template without directive (as I never know what the directive will be)</p>