Tab active in mdb-tabset

MDB SupportCategory: MDB AngularTab active in mdb-tabset
birmain Pro User asked 2 months ago in MDB pro, version:6.1.2

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 Pro User replied 2 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.

1 Answers
Damian Gemza answered 2 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

Damian Gemza replied 2 months ago

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

birmain Pro User replied 2 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 replied 2 months ago

Does this solution works to you?

birmain Pro User replied 2 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 ();
}