Primeng 10 - tabPanel existence changes due to *ngIf do not take place

Question

In the new Primeng 10, changes to *ngIf expressions are not creating/destroying tabs unless some other tab is clicked on. This works in previous versions.

See stackblitz: https://stackblitz.com/edit/github-8tlw34?file=src/app/app.component.html

Briefly, the tabs do not show up or disappear when the 'kind' member is changed:

<p-tabView>
  <p-tabPanel header="Any (1)">
    Content Any (1)
  </p-tabPanel>
  <p-tabPanel header="Group Only" *ngIf="kind === 'group'">
    Content Group
  </p-tabPanel>
  <p-tabPanel header="Subgroup Only" *ngIf="kind === 'subgroup'">
    Content Subgroup
  </p-tabPanel>
  <p-tabPanel header="Any (2)">
    Content Any (2)
  </p-tabPanel>
</p-tabView>

<hr>
<button pButton type="button" label="group" (click)="setKind('group')"></button>
<button pButton type="button" label="subgroup" (click)="setKind('subgroup')"></button>
<button pButton type="button" label="none" (click)="setKind('none')"></button>

AppComponent simply tracks the 'kind' member:

export class AppComponent {
  kind = 'none';

  setKind(s: string) {
    this.kind = s;
  }
}

But Initially, Any (1) and Any (2) are shown (correct) Click button to set kind to 'group' - group tab should show (it does not) Click button to set kind to 'subgroup' - subgroup tab should show (it does not) Click on the Any (1) tab OR the Any (2) tab - the correct group or subgroup tab now shows up!

I think it is a prime bug though I don't know how, but is there is a solution or some workaround I can do?

Thanks,

-- Thor

Answer 1

I reported this issue to the PrimeNG team and PrimeNG has fixed this with version 10.0.1.