fix(tabset): properly determine titles when using nested tabsets

Closes #2249
ng-bootstrap · Mar 23, 2018 · 4a2f65a · 4a2f65a
1 parent 171a70d
commit 4a2f65a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/src/tabset/tabset.spec.ts b/src/tabset/tabset.spec.ts
@@ -169,6 +169,35 @@ describe('ngb-tabset', () => {
     expect(tabTitles[2].textContent).toMatch(/bazbaz/);
   });
 
+  it('should not pick up titles from nested tabsets', () => {
+    const testHtml = `
+    <ngb-tabset>
+      <ngb-tab title="parent">
+        <ng-template ngbTabContent>
+          <ngb-tabset>
+            <ngb-tab>
+              <ng-template ngbTabTitle>child</ng-template>
+              <ng-template ngbTabContent></ng-template>
+            </ngb-tab>
+          </ngb-tabset>        
+        </ng-template>
+      </ngb-tab>      
+    </ngb-tabset>        
+    `;
+    const fixture = createTestComponent(testHtml);
+    // additional change detection is required to reproduce the problem in the test environment
+    fixture.detectChanges();
+
+    const titles = getTabTitles(fixture.nativeElement);
+    const parentTitle = titles[0].textContent.trim();
+    const childTitle = titles[1].textContent.trim();
+
+    expect(parentTitle).toContain('parent');
+    expect(parentTitle).not.toContain('child');
+    expect(childTitle).toContain('child');
+    expect(childTitle).not.toContain('parent');
+  });
+
 
   it('should not crash for empty tabsets', () => {
     const fixture = createTestComponent(`<ngb-tabset activeId="2"></ngb-tabset>`);

diff --git a/src/tabset/tabset.ts b/src/tabset/tabset.ts
@@ -48,8 +48,20 @@ export class NgbTab {
    */
   @Input() disabled = false;
 
-  @ContentChild(NgbTabContent) contentTpl: NgbTabContent;
-  @ContentChild(NgbTabTitle) titleTpl: NgbTabTitle;
+  titleTpl: NgbTabTitle | null;
+  contentTpl: NgbTabContent | null;
+
+  @ContentChildren(NgbTabTitle, {descendants: false}) titleTpls: QueryList<NgbTabTitle>;
+  @ContentChildren(NgbTabContent, {descendants: false}) contentTpls: QueryList<NgbTabContent>;
+
+  ngAfterContentChecked() {
+    // We are using @ContentChildren instead of @ContantChild as in the Angular version being used
+    // only @ContentChildren allows us to specify the {descendants: false} option.
+    // Without {descendants: false} we are hitting bugs described in:
+    // https://github.com/ng-bootstrap/ng-bootstrap/issues/2240
+    this.titleTpl = this.titleTpls.first;
+    this.contentTpl = this.contentTpls.first;
+  }
 }
 
 /**