Ng-bootstrap sub tabs (Angular 2)

Question

I am trying to nest a tab widget ng-bootstrap, but the contents of the sub tab do not display correctly. When I click on a sub tab, the content itself disappears.

Minimal demonstration

What am I doing wrong?

This is a code of the form:

<ngb-tabset> <ngb-tab *ngFor="let tab of tabs"> <ng-template ngbTabTitle> {{ tab.title }} </ng-template> <ng-template ngbTabContent> {{ tab.content }} <ngb-tabset> <ngb-tab> <ng-template ngbTabTitle> 1 </ng-template> <ng-template ngbTabContent> 1 </ng-template> </ngb-tab> <ngb-tab> <ng-template ngbTabTitle> 2 </ng-template> <ng-template ngbTabContent> 2 </ng-template> </ngb-tab> <ngb-tab> <ng-template ngbTabTitle> 3 </ng-template> <ng-template ngbTabContent> 3 </ng-template> </ngb-tab> </ngb-tabset> </ng-template> </ngb-tab> </ngb-tabset> 

Answer 1

Refresh

https://github.com/ng-bootstrap/ng-bootstrap/issues/1433#issuecomment-325104017

previous version

A possible workaround may have an additional template, for example:

 <ngb-tabset> <ngb-tab *ngFor="let tab of tabs"> <ng-template ngbTabTitle> {{ tab.title }} </ng-template> <ng-template ngbTabContent> {{ tab.content }} <ng-container *ngTemplateOutlet="innerTabset"></ng-container> </ng-template> </ngb-tab> </ngb-tabset> <ng-template #innerTabset> <ngb-tabset> <ngb-tab> <ng-template ngbTabTitle> 1 </ng-template> <ng-template ngbTabContent> 1 </ng-template> </ngb-tab> <ngb-tab> <ng-template ngbTabTitle> 2 </ng-template> <ng-template ngbTabContent> 2 </ng-template> </ngb-tab> <ngb-tab> <ng-template ngbTabTitle> 3 </ng-template> <ng-template ngbTabContent> 3 </ng-template> </ngb-tab> </ngb-tabset> </ng-template> 

Plunger example

And you can generate any number of nested tabs, for example:

 <ng-container *ngTemplateOutlet="innerTabset; context: { $implicit: tabs }"></ng-container> <ng-template #innerTabset let-tabs> <ngb-tabset> <ngb-tab *ngFor="let tab of tabs"> <ng-template ngbTabTitle> {{ tab.title }} </ng-template> <ng-template ngbTabContent> {{ tab.content }} <ng-template [ngIf]="tab.children"> <ng-container *ngTemplateOutlet="innerTabset; context: { $implicit: tab.children }"></ng-container> </ng-template> </ng-template> </ngb-tab> </ngb-tabset> </ng-template> 

Plunger example

It seems to work because each inline template has its own scope and angular does not mix query results

Answer 2

For people who face the same problem. Angular 4.3.6 contains a fix for this problem.

More information here: https://github.com/ng-bootstrap/ng-bootstrap/issues/1433