How can I render content of 1 child from ContentChildren QueryList in Angular2+


I would like to render content from one element in QueryList filled by ContentChildren.

Let’s say I want to build tab component and this is my template for using such component:

  <my-tab title="title1">some content 1<my-tab>
  <my-tab title="title2">some content 2<my-tab>

My current tabs component html:

<div class="header">
    <li> *ngFor="let tab of tabs, let i = index; let isLast = last">...<li>
<!-- Missing !!! -->


@ContentChildren(MyTabComponent) public tabs: QueryList<MyTabComponent>;

My problem is how can I render only active tab? (<!-- Missing !!! -->)

I tried:

<ng-container [ngComponentOutlet]="tabs.toArray()[currentIndex].content"></ng-container>

<ng-container [ngTemplatetOutlet]="tabs.toArray()[currentIndex].content"></ng-container>    

<ng-container [ngComponentOutlet]="tabs.toArray()[currentIndex]"></ng-container>

<ng-container [ngTemplatetOutlet]="tabs.toArray()[currentIndex]"></ng-container>

But tab content is never rendered. my-tab component html is just:


at the moment.

I check online how others are solving this problems, but everyone are using just <ng-content></ng-content> and then hides inactive tabs.
But I think better would be to render only needed content (better performance).

I also found this code where <ng-container [ngTemplateOutlet]="step.content"></ng-container> is used, but I tried this approach and it doesn’t render anything.

I also prepare stackblitz.