diff --git a/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html b/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html
index 0da962c1..56f8901d 100644
--- a/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html
+++ b/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html
@@ -5,14 +5,14 @@
role="tablist">
;
+ @ViewChildren('tabNavLinks') private tabNavLinks?: QueryList
>;
+
private tabSubscriptions?: Array;
isTrueBooleanInput(booleanInput?: BooleanInput): boolean {
@@ -50,19 +61,19 @@ export class TabContainerComponent extends AbstractComponent implements OnDestro
}));
this._changeDetectorRef.detectChanges(); // Force update html render
}),
- delay(100)
+ switchMap(() => this.tabNavLinks?.changes.pipe(startWith(undefined)) || of(undefined))
).subscribe(() => {
// Init tabs from bootstrap-italia
- const triggerTabList: Array = this._elementRef.nativeElement.querySelectorAll('.nav-item a');
- triggerTabList?.forEach(triggerEl => {
- const tabTrigger = Tab.getOrCreateInstance(triggerEl);
+ this.tabNavLinks?.forEach(tabNavLink => {
+ const triggerEl = tabNavLink.nativeElement,
+ tabTrigger = Tab.getOrCreateInstance(triggerEl);
if (triggerEl.getAttribute('tab-listener') !== 'true') {
triggerEl.addEventListener('click', event => {
event.preventDefault();
- triggerEl.setAttribute('tab-listener', 'true'); // Prevents multiple insertion of the listener
tabTrigger.show();
});
+ triggerEl.setAttribute('tab-listener', 'true'); // Prevents multiple insertion of the listener
}
});
});
diff --git a/src/app/tabs/tabs-example/tabs-example.component.html b/src/app/tabs/tabs-example/tabs-example.component.html
index 61fd8478..ccf2267c 100644
--- a/src/app/tabs/tabs-example/tabs-example.component.html
+++ b/src/app/tabs/tabs-example/tabs-example.component.html
@@ -14,13 +14,13 @@ Configurazione tabs
Risultato tabs
-
{{tab.content}}
-
+
Titolo
Contenuto complesso badge
diff --git a/src/app/tabs/tabs-example/tabs-example.component.ts b/src/app/tabs/tabs-example/tabs-example.component.ts
index 0bae27e2..9e5ab904 100644
--- a/src/app/tabs/tabs-example/tabs-example.component.ts
+++ b/src/app/tabs/tabs-example/tabs-example.component.ts
@@ -1,4 +1,5 @@
import { Component } from '@angular/core';
+import { IconName } from '../../../../projects/design-angular-kit/src/lib/interfaces/icon';
@Component({
selector: 'it-tabs-example',
@@ -13,21 +14,25 @@ export class TabsExampleComponent {
isPill = false;
- tabs = [
+ tabs: Array<{
+ label: string,
+ content: string,
+ icon: IconName
+ }> = [
{
label: 'tab1',
content: 'content1',
- icon: 'it-file'
+ icon: 'file'
},
{
label: 'tab2',
content: 'content2',
- icon: 'it-calendar'
+ icon: 'calendar'
},
{
label: 'tab3',
content: 'content3',
- icon: 'it-comment'
+ icon: 'comment'
}
];
}