Ngx-bootstrap: 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
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.

[findela]

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