Primeng: TabView: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

[gkaur94]

I'm submitting a ... (check one with "x")

[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

Plunkr Case (Bug Reports)

http://plnkr.co/edit/w70WaegPQgGveMb2VPj8?p=preview

Current behavior

When you try to display multiple tabs using an ngFor loop from an observable of an array of items, you get the following error:

TabPanel.html:2 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'none'. Current value: 'block'.

or, in PrimeNg 5.x:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

However, if you explicitly set selected to the first element, e.g. using:

<p-tabView>
  <ng-container *ngFor="let item of (items$ | async); first as isFirst">
    <p-tabPanel [header]="item.name" [selected]="isFirst">
      ...

it works (see http://plnkr.co/edit/YazpmsNH4IOq3Q9f5s0V?p=preview). Therefore it seems that this is caused by the default selecting of the first element if that isn't explicitly provided by the user.

Expected behavior

You should not need to manually set the selected state of the p-tabPanel to avoid this error.

Please tell us about your environment:

Angular CLI: 1.5.0
Node: 8.7.0
OS: darwin x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1

• Angular version: 5.0.1
  

• PrimeNG version: 5.0.2
  

• Browser: Google Chrome - Version 62.0.3202.94 (Official Build) (64-bit)

[cagataycivici]

Unable to pass this Angular restriction, so added this information to the docs;

Dynamic Tabs
p-tabPanel components can be generated dynamically using ngFor, note that in this case due to an Angular issue selected property must be enabled manually.

<p-tabView>
    <p-tabPanel [header]="item.header" *ngFor="let item of items; let i = index" [selected]="i == 0">
        {{item.content}}
    </p-tabPanel>
</p-tabView>