Topic: Tab active in mdb-tabset

birmain pro asked 5 years 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 pro commented 5 years 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 staff answered 5 years 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 pro commented 5 years 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 staff commented 5 years ago

Does this solution works to you?

birmain pro commented 5 years 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 staff commented 5 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags