ng-content in for loop

Question

I\'m trying to create a tab component using bootstrap.

  Description 1
  

        

Answer 1

You can take a look at how angular material implemented tabs control.

There are some caveats about this approach https://github.com/angular/angular/issues/18691 but anyway here is simplified version:

tab.component.ts

@Component({
  selector: 'app-tab',
  template: `
    <ng-template>
      <ng-content></ng-content>
    </ng-template>`
})
export class TabComponent {
  ...

  @ViewChild(TemplateRef) template: TemplateRef<any>;
}

tabs.component.ts

<div *ngFor="let tab of tabs; let i = index" 
           class="tab-pane" [ngClass]="{'active': i === 0}"...>
   <ng-container *ngTemplateOutlet="tab.template"></ng-container>
</div>

Plunker Example