Topic: TabsetComponent always undefined in MDBootstap 8.10.0
donatellaGATTO priority asked 3 years ago
Expected behavior select tab programmatically
Actual behavior I try to handle tab activation using setActiveTab() into my angular component. To do this i read https://mdbootstrap.com/docs/angular/components/tabs/#set-active-tab documentation but TabsetComponent defined using ViewChild is always undefined. Accordind to another issue https://mdbootstrap.com/support/angular/select-tab-index-initially/ i try to select the tab using this.caseTabs.click(Event.AT_TARGET, 1); but not work.
Can anyone help me toi fix this issue?
Resources (screenshots, code snippets etc.)
HTML
TS @ViewChild('tabs', {static:true}) tabs: TabsetComponent;
ngAfterViewInit() { this.tabs.setActiveTab(1); }
ERROR Cannot read property 'setActiveTab' of undefined
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 8.10.0
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
Arkadiusz Idzikowski staff commented 3 years ago
@donatellaGATTO
Did you add template reference variable
#tabs
in the HTML template?donatellaGATTO priority commented 3 years ago
Yes I do, but not work
Arkadiusz Idzikowski staff commented 3 years ago
We will take a closer look at that and let you know what we found. Do you use static HTML code or generate tabs with ngFor directive?
udaya kumar free commented 3 years ago
I am also facing same issue. Cannot read property 'setActiveTab' of undefined. I am using static html.
udaya kumar free commented 3 years ago
I used @ViewChild(TabsetComponent) staticTabs: TabsetComponent; instead of @ViewChild('staticTabs', { static: true }) staticTabs: TabsetComponent;
It is working now... is it right?
Arkadiusz Idzikowski staff commented 3 years ago
@udaya kumar Both approaches are correct, but it depends on your HTML code. Can you share the full HTML/TS code so we can reproduce this problem on our end?