TabsetComponent throwing TypeError

[pmakanga]

Hello, I am facing a problem with TabsetComponent (manual selection) while following up with a tutorial that was done with Angular6, its throwing "ERROR TypeError: Cannot read property 'tabs' of undefined" when I check using chrome tools. I am using Angular7 and I have counter checked and everything looks okay. Below is the link of the component throwing the error https://github.com/pmakanga/DatingApp/blob/master/DatingApp-SPA/src/app/members/member-detail/member-detail.component.ts

Have used: @ViewChild('memberTabs') memberTabs: TabsetComponent;

And the calling method as below

selectTab(tabId: number) { this.memberTabs.tabs[tabId].active = true; }

The angular html component is on the below link https://github.com/pmakanga/DatingApp/blob/master/DatingApp-SPA/src/app/members/member-detail/member-detail.component.html

The tab is being called with the below method <button class="btn btn-success w-100"(click)="selectTab(3)">Message

[ludmilanesvitiy]

@pmakanga Hello! Please provide a reproduction via StackBlitz. Starter template: https://stackblitz.com/edit/ngx-bootstrap

[Domainv]

Closes as outdated

[paulrmaurer1]

How was this resolved? I'm facing the same exact issue. Thanks.

[HarisHorozovic]

in member-detail.component.ts change the following code on line 17, "@ViewChild('memberTabs') memberTabs: TabsetComponent" to "@ViewChild('memberTabs', {static: true}) memberTabs: TabsetComponent", note: I am using Angular 8 for the same course as you are and it works for me, hope it works for you as well.

[findelallc]

ERROR TypeError: Cannot read property 'tabs' of undefined

This is what I am getting, I followed in exact documented way -

@ViewChild('staticTabs', { static: true }) staticTabs: TabsetComponent;

in method:

this.staticTabs.tabs[tabId] = flag;

in component HTML

<tabset #staticTabs>
                      <tab heading="Static title">Static content</tab>
                      <tab heading="Static Title 1">Static content 1</tab>
                    </tabset>

[hvsharma63]

in member-detail.component.ts change the following code on line 17, "@ViewChild('memberTabs') memberTabs: TabsetComponent" to "@ViewChild('memberTabs', {static: true}) memberTabs: TabsetComponent", note: I am using Angular 8 for the same course as you are and it works for me, hope it works for you as well.

This worked for me in Angular 9

[SilviuMihai]

Hello, I was getting the same error. Please follow the guide correctly when using it.(ngx-bootstrap) Example:

<p>
    <button type="button" class="btn btn-primary btn-sm" (click)="selectTab(0)">Select second tab</button>
</p>
<tabset #staticTabs> // don't forget about #staticTabs, where you are using the tabset
    <tab heading="Static title">Static content</tab>
</tabset>

And in the ts file: @ViewChild('staticTabs', { static: false }) staticTabs: TabsetComponent; I hope it helps.

[ahmedzezo22]

this solution work with me successfully @ViewChild('staticTabs', { static: true}) staticTabs: TabsetComponent; just make object static:true and will work well