fix(): nested tabset

angular-ex · Sep 14, 2023 · fa7b08c · fa7b08c
1 parent 9a7dd3b
commit fa7b08c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/projects/lib/src/lib/modules/tabs/components/tabset.ts b/projects/lib/src/lib/modules/tabs/components/tabset.ts
@@ -11,7 +11,7 @@ export class SuiTabset implements AfterContentInit {
     @ContentChildren(SuiTabHeader, { descendants: true })
     private _tabHeaders!:QueryList<SuiTabHeader>;
 
-    @ContentChildren(SuiTabContent, { descendants: true })
+    @ContentChildren(SuiTabContent)
     private _tabContents!:QueryList<SuiTabContent>;
 
     // List of all tabs in the tabset.
@@ -65,12 +65,17 @@ export class SuiTabset implements AfterContentInit {
 
     // Connects tab headers to tab contents, and creates a tab instance for each pairing.
     private loadTabs():void {
+        const parentEleFirstTab = this._tabHeaders.first.eleRef.nativeElement.parentElement;
         // Remove any tabs that no longer have an associated header.
         this.tabs = this.tabs.filter(t => !!this._tabHeaders.find(tH => tH === t.header));
 
         this._tabHeaders
             // Filter out the loaded headers with attached tab instances.
-            .filter(tH => !this.tabs.find(t => t.header === tH))
+            .filter(tH => 
+                !this.tabs.find(t => t.header === tH)
+                // Fix for ContentChildren can't see elements in ng-content like tab-header
+                && (tH.eleRef.nativeElement.parentElement === parentEleFirstTab)
+            )
             .forEach(tH => {
                 const content = this._tabContents.find(tC => tC.id === tH.id);
 

diff --git a/projects/lib/src/lib/modules/tabs/directives/tab-header.ts b/projects/lib/src/lib/modules/tabs/directives/tab-header.ts
@@ -1,4 +1,4 @@
-import { HostBinding, Input, Directive, EventEmitter, HostListener, Output } from "@angular/core";
+import { HostBinding, Input, Directive, EventEmitter, HostListener, Output, ElementRef } from "@angular/core";
 
 @Directive({
     selector: "[suiTabHeader]"
@@ -69,7 +69,7 @@ export class SuiTabHeader {
         }
     }
 
-    constructor() {
+    constructor(public eleRef: ElementRef) {
         this._isActive = false;
         this.isActiveChange = new EventEmitter<boolean>();
         this.isActiveExternalChange = new EventEmitter<boolean>();