Nesting ng-bootstrap tabs (Angular 2)

angular, javascript, ng-bootstrap, typescript

Solution

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>

Plunker Example

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>

Plunker Example

It works because each of embedded template has its own scope and angular doesn't mix query results

Problem

Original source