Primeng: tabView with *ngIf malfunction

[sforest1975]

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

tabView in 10.0.0-rc1 malfunction if using *ngIf.

app.component.html

<p-tabView>
  <p-tabPanel header="Header 0">
    Content 0
  </p-tabPanel>
  <p-tabPanel header="Header 1" *ngIf="mode == 1">
    Content 1
  </p-tabPanel>
  <p-tabPanel header="Header 2" *ngIf="mode == 2">
    Content 2
  </p-tabPanel>
</p-tabView>

<p-button label="Click" (click)="onClick()"></p-button>

app.component.ts

  mode = 0;

  onClick() {
    this.mode++;
  }

In this case, firstly 'Header 0' only displays. (mode = 0)

push, button, mode become 1. but, html nothing change. this should be display 'Header 0' and 'Header 1'. (If click 'Header 0', 'Header 1' display). angular 9 work properly.

Please fix this problem, and/or please let me know how to show 'Header 1' manually without user click.

[WillooWisp]

I experience that no dynamic changes from code is reflected, e.g. adding or removing items from a tabs array used in and ng-for statement is not applied either. Referencing the tabview component from code and calling this.tabView.cd.markForCheck() makes the changes get applied, even solves the case above.

[ValentinSchwarzXavo]

I can confirm, using ngFor for dynamic tabs as stated in the documentation does not reflect changes on bound property. Using a ngIf on the p-tabView itself solves the issue for me. Stackblitz

[OPunktSchmidt]

I think i have a similar issue: https://forum.primefaces.org/viewtopic.php?f=35&p=185930#p185930

But this.tabView.cd.markForCheck() does not work for me. @WillooWisp Where do you call this.tabView.cd.markForCheck()? In ngAfterViewInit it does not work

[OPunktSchmidt]

Okay, found a solution for me. This works for me. But of course it is dirty as hell. For me it was important to call markForCheck not immediately.

    ngAfterViewInit() {
        setTimeout(() => {
            this.loginTabView.cd.markForCheck();
        }, 100);
    }