Primeng: TabView *ngIf issue

[glivolsi]

The following simple code produce a noisy error
this occour only when the *ngIf directive is on first tab...!!! Can investigate please..!!
TabPanel.ngfactory.js:25 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ui-helper-hidden: true'. Current value: 'ui-helper-hidden: false'. at viewDebugError (core.js:9991) at expressionChangedAfterItHasBeenCheckedError (core.js:9969) at checkBindingNoChanges (core.js:10136) at checkNoChangesNodeInline (core.js:14184) at checkNoChangesNode (core.js:14158) at debugCheckNoChangesNode (core.js:14987) at debugCheckDirectivesFn (core.js:14889) at Object.eval [as updateDirectives] (TabPanel.ngfactory.js:37) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14871) at checkNoChangesView (core.js:13996)

The HTML FIle

<input type="button" (click)="handleClick()" /> <p-tabView> <p-tabPanel header="Header 1" *ngIf="d"> Content 1 </p-tabPanel> <p-tabPanel header="Header 2"> Content 2 </p-tabPanel> <p-tabPanel header="Header 3"> Content 3 </p-tabPanel> </p-tabView>
The .TS file
`import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
d = true;
title = "app";

handleClick() {
this.d = !this.d;
console.log("aa");
}
}`

[JacobSiegle]

Include a plnkr in the future.
http://plnkr.co/edit/CuHdSHeDRSE5Ge9jL14z?p=preview

[cagataycivici]

https://github.com/primefaces/primeng/issues/4530

[KeithGillette]

We are getting the same error with an *ngIf on the _second_ tab in a static p-tabView but only on a page refresh which loads the second tab immediately.

TabPanel.html:2 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ui-helper-hidden: true'. Current value: 'ui-helper-hidden: false'.
    at viewDebugError (core.js:9775)
    at expressionChangedAfterItHasBeenCheckedError (core.js:9753)
    at checkBindingNoChanges (core.js:9920)
    at checkNoChangesNodeInline (core.js:13968)
    at checkNoChangesNode (core.js:13942)
    at debugCheckNoChangesNode (core.js:14771)
    at debugCheckDirectivesFn (core.js:14673)
    at Object.eval [as updateDirectives] (TabPanel.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14655)
    at checkNoChangesView (core.js:13780)

In our case, we are setting the activeIndex off of a subscription to ActivatedRoute.params, so the second tab (with the *ngIf) can be activated immediately on page refresh based on a route parameter.

While I can't easily recreate the exact error above in a Plunkr, I reproduce the following very similar ExpressionChangedAfterItHasBeenCheckedError in this trivial Plunkr.

TabPanel.html:2 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'none'. Current value: 'block'.
    at viewDebugError (VM1234 core.umd.js:8450) [angular]
    at expressionChangedAfterItHasBeenCheckedError (VM1234 core.umd.js:8428) [angular]
    at checkBindingNoChanges (VM1234 core.umd.js:8592) [angular]
    at checkNoChangesNodeInline (VM1234 core.umd.js:12453) [angular]
    at checkNoChangesNode (VM1234 core.umd.js:12427) [angular]
    at debugCheckNoChangesNode (VM1234 core.umd.js:13204) [angular]
    at debugCheckRenderNodeFn (VM1234 core.umd.js:13144) [angular]
    at Object.eval [as updateRenderer] (VM3628 TabPanel.ngfactory.js:31) [angular]
    at Object.debugUpdateRenderer [as updateRenderer] (VM1234 core.umd.js:13126) [angular]
    at checkNoChangesView (VM1234 core.umd.js:12249) [angular]
    at callViewAction (VM1234 core.umd.js:12613) [angular]
    at execEmbeddedViewsAction (VM1234 core.umd.js:12591) [angular]
    at checkNoChangesView (VM1234 core.umd.js:12248) [angular]
    at callViewAction (VM1234 core.umd.js:12613) [angular]

Based on this, I hope you will please consider reopening this issue, @cagataycivici. Thanks!

[glivolsi]

I've changed TAB component , now i use the Angular Material Tab component this one is without issues

[perlboy]

Hi there, sorry to grave dig this but this also occurs when using dynamic header attribute as well (ie. ngContainer or other *ngFor did not resolve). Adding as a note here, up to you if you think this is a bug or "quirk", functional tabView and tabPanel start below (iterate of key/value object (object of objects)), resolved using previously mentioned [selected] entry:

 <p-tabView *ngIf="this.entriesByType && this.tableSettings">
                        <p-tabPanel header="{{ getCategoryName(entryType.key) }}" *ngFor="let entry of this.entriesByType | keyvalue; let i = index" [selected]="i == 0">

[JacobSiegle]

You're better off opening a new issue for any other bugs and linking back to here, i've never seen an issue get reopened.

[perlboy]

You're better off opening a new issue for any other bugs and linking back to here, i've never seen an issue get reopened.

Thanks for the reply. To be honest I wasn't sure if I would call it a bug or quirk but what seemed relevant was the original thread didn't mention other attributes triggering the same issue. Given the solution is the same ([selected ... etc) I figured I'd just feed the search engines something extra.