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


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?



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • 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