Tab active in mdb-tabset

MDB SupportCategory: MDB AngularTab active in mdb-tabset
birmain Pro UserPremium asked 6 days 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 UserPremium replied 5 days 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 5 days 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 3 days ago

Does this solution works to you?

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