Cannot switch tabs from child component

[sudha-tup]

I am trying to switch tabs in AppComponent from a button in a class inheriting AppComponent. I see that the setTab method is being executed when the button is clicked and the tabs array is being modified. But the tabs don't switch. Any thoughts?

app.component.ts:

export class AppComponent {
  public tabs: any[] = [
    {title: 'Accounts', content: '', active: true},
    {title: 'Names', content: '', active: false}
  ];

  setTab(index: number): void {
    this.tabs[index].active = true;
    if (index==1) {
      this.tabs[0].active = false;
    } else {
      this.tabs[1].active = false;
    }
  }

app.component.html

<tabset>
  <tab *ngFor="let tab of tabs; let i = index"
            [heading]="tab.title"
            [active]="tab.active"  
            (select)="setTab(i)">
    <div *ngIf="i==0">
      Accounts Content
      <app-accounts></app-accounts>
    </div>
    <div *ngIf="i==1">
      Names Content
    </div>
  </tab>
</tabset>

accounts.component.html

<div>
  <button (click)="setTab(1)">Click Tab2</button>
</div>

Don't have any code in AccountsComponent, but it extends AppComponent, so that the setTab method is available.

export class AccountsComponent extends AppComponent {
  constructor() {
    super();
  }
}

I just installed "bootstrap": "^3.3.7", "ng2-bootstrap": "^1.6.3" on top of default packages which were installed by cli. Followed instructions in https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/bootstrap4.md. Also, if I move the button to the AppComponent from the child component, I dont have any problem in controlling the tabs, and it works fine.

[IlyaSurmay]

Please provide plunkr/stackblitz with reproduction You can use one of starter templates: Plunkr: https://plnkr.co/edit/0NipkZrnckZZROAcnjzB?p=preview StackBlitz: https://stackblitz.com/edit/ngx-bootstrap?file=app%2Fapp.module.ts

[IlyaSurmay]

https://plnkr.co/edit/xQ3BJOXCwzhEa4LmQ4rW?p=preview - I created a little reproduction of your issue and it's clear to me that this is supposed to be this way, because when you extend a component, you copy all methods and properties. So when you click on set tab button in your child component, you're actually changing tabs property of child component, not the one it was extended from.