title: How can I render content of 1 child from ContentChildren QueryList in Angular2+
body: <p>I would like to render content from one element in QueryList filled by  <code>ContentChildren</code>.</p>
  
  <p>Let's say I want to build tab component and this is my template for using such component:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;my-tabs&gt;
    &lt;my-tab title="title1"&gt;some content 1&lt;my-tab&gt;
    &lt;my-tab title="title2"&gt;some content 2&lt;my-tab&gt;
  &lt;/my-tabs&gt;
  </code></pre>
  
  <p>My current tabs component html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="header"&gt;
    &lt;ul&gt;
      &lt;li&gt; *ngFor="let tab of tabs, let i = index; let isLast = last"&gt;...&lt;li&gt;
    &lt;/ul&gt;        
  &lt;/div&gt;
  &lt;!-- Missing !!! --&gt;
  </code></pre>
  
  <p>Code:</p>
  
  <pre class="lang-js prettyprint-override"><code>@ContentChildren(MyTabComponent) public tabs: QueryList&lt;MyTabComponent&gt;;
  </code></pre>
  
  <p>My problem is how can I render only active tab? (<code>&lt;!-- Missing !!! --&gt;</code>)</p>
  
  <p>I tried:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-container [ngComponentOutlet]="tabs.toArray()[currentIndex].content"&gt;&lt;/ng-container&gt;
  
  &lt;ng-container [ngTemplatetOutlet]="tabs.toArray()[currentIndex].content"&gt;&lt;/ng-container&gt;    
  
  &lt;ng-container [ngComponentOutlet]="tabs.toArray()[currentIndex]"&gt;&lt;/ng-container&gt;
  
  &lt;ng-container [ngTemplatetOutlet]="tabs.toArray()[currentIndex]"&gt;&lt;/ng-container&gt;
  </code></pre>
  
  <p>But tab content is never rendered. <code>my-tab</code> component html is just:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;body&lt;/div&gt;
  &lt;ng-template&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/ng-template&gt;
  </code></pre>
  
  <p>at the moment.</p>
  
  <p>I check online how others are solving this problems, but everyone are using just <code>&lt;ng-content&gt;&lt;/ng-content&gt;</code> and then hides inactive tabs.<br>
  But I think better would be to render only needed content (better performance).</p>
  
  <p>I also found <a href="https://github.com/angular/material2/blob/master/src/lib/stepper/stepper-vertical.html" rel="noreferrer">this</a> code where <code>&lt;ng-container [ngTemplateOutlet]="step.content"&gt;&lt;/ng-container&gt;</code> is used, but I tried this approach and it doesn't render anything.</p>
  
  <p><strong>Edited:</strong><br>
  I also prepare <a href="https://stackblitz.com/edit/angular-7hyjkn?file=app%2Fstepper.ts" rel="noreferrer">stackblitz</a>.</p>