I'm trying to nest a ng-bootstrap tab widget, but the content of the nested tab isn't shown properly. The moment I click on a nested tab, the content itself disappears.
What am I doing wrong?
This is the view code:
<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>
Update
Angular 4.3.6 contains a fix for this issue.
https://github.com/ng-bootstrap/ng-bootstrap/issues/1433#issuecomment-325104017
Previous version
It's a bug.
Possible workaround might be having additional template like:
<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>
And you can generate any number of nested tabs like:
<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>
It works because each of embedded template has its own scope and angular doesn't mix query results
For people who are facing the same problem. Angular 4.3.6 contains a fix for this issue.
More information here : https://github.com/ng-bootstrap/ng-bootstrap/issues/1433