primeng tabview angular issue setting active tab in code

Question

I am using Primeng Tabview in my angular application. I have the code as shown below to set the active tab using code.

<button (click)="change(0)">First</button>
<button (click)="change(1)">Second</button>
<button (click)="change(2)">Third</button>

<p:tabView [activeIndex]="index" ...


public index: number;

change(index: number): void {
    this.index = index;
}

But as soon as I manually go to a tab and try to click on the button, it is not going to the right tab. Not sure what is wrong or how to make it work?

Answer 1

Update your index variable while changing tab manually.

HTML

<p-tabView [activeIndex]="index" (onChange)="handleChange($event)">...

TS

handleChange(e) {
  this.index = e.index;
}

See Plunker

Answer 2

Alternatively, use two-way binding:

<p-tabView [(activeIndex)]="index"></p-tabView>