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"> @@ -21,7 +21,7 @@
; + @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' } ]; }