9

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.

Minimal demo

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>
iehrlich
  • 3,572
  • 4
  • 34
  • 43
alexandernst
  • 14,352
  • 22
  • 97
  • 197
  • what is the expected view? can you add a wireframe? – Aravind May 01 '17 at 12:13
  • Well, I think it's clear enough. I want a nested tabs widget, which means that each tab of level 1 should have a tab widget with it's own tabs. – alexandernst May 01 '17 at 12:14
  • @alexandernst this is wiered, I'd recommend to add bug in their official github repo. I can see you already added [comment](https://github.com/ng-bootstrap/ng-bootstrap/issues/1433) there :D – Pankaj Parkar May 01 '17 at 12:22
  • @PankajParkar is right. I tried doing this. and its a bug of ng-bootstrap. will try fixing it. help Pankaj – Aravind May 01 '17 at 12:33

2 Answers2

10

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

Community
  • 1
  • 1
yurzui
  • 205,937
  • 32
  • 433
  • 399
1

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

klagrida
  • 169
  • 1
  • 4