Tab active in mdb-tabset

birmain asked 4 months ago

When the mdb-tabset component is used, reference can be made using

@ViewChild ('staticTabs') public staticTabs;

I can set the active tab using this.staticTabs.setActiveTab (2), but I can not find the way to know which tab is active at any time. There is no such thing as this.staticTabs.getActiveTab ()

I'd appreciate your help


birmain commented 4 months ago

The above is only valid for two tabs. No available events provide a status in which the active tab can be viewed. I will continue studying.


Damian Gemza answered 4 months ago

Dear birmain,

There's no something like getActiveTab() method, but you're able to get active tab by searching for .active class on element. If element has .active class, it's active.

Please check this code:

ngAfterViewInit() {

this.staticTabs.setActiveTab(3);

setTimeout(() => {

this.staticTabs.tabEl.forEach(element=> {

if (element.nativeElement.classList.contains('active')) {

console.log(element);

}

});

}, 500);

}

Best Regards,

Damian


birmain commented 4 months ago

Thanks for your reply:

I am thinking of a solution and I have devised the following:

In HTML:
<mdb-tabset #staticTabs (hiddenBsTab) = "onChangeTab ()">

In Component:

private tabActive (): number {
let i: number;
for (i = 0; i <this.staticTabs.tabs.length; i ++) {
if (! this.staticTabs.tabs [i] ['active']) {break; }
}
return i + 1;
}
tabCurrentActive: number;

onChangeTab () {
this.tabCurrentActive = this.tabActive ();
}


Damian Gemza commented 4 months ago

Does this solution works to you?


birmain commented 4 months ago

The above is only valid for two tabs. No available events provide a status in which the active tab can be viewed. I will continue studying.


Damian Gemza commented 4 months ago

Thanks for your report, we'll try to fix this problem with future releases.
Best Regards,
Damian


Please insert min. 20 characters.
Status

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No