BehaviourSubject subscription in Component constructor with "*ngIf" throws a "ExpressionChangedAfterItHasBeenCheckedError"

Question

I have the complete UI in the AppComponent, and I want to show only the Login Screen if not logged in.

I created a BehaviourSubject and subscribed it in the AppComponent Constructor.

The login worked, but the next change (logout for example) references in:

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

app.component.ts

export class AppComponent implements OnInit {

    isLoggedIn = false;

    constructor(private authenticationService: AuthenticationService) {
        this.authenticationService.loggedIn$.subscribe((res) => {
            this.isLoggedIn = res;
        });
    }

    ngOnInit(): void {
    }
}

app.component.html

<div *ngIf="isLoggedIn; else showLoginBox">
    <div class="container-fluid d-flex">
            <div id="main-content">
                <router-outlet></router-outlet>
            </div>
    </div>
</div>
<ng-template #showLoginBox>
    <app-login></app-login>
</ng-template>

I want to show only the Login Screen if not logged in.

I dont think that the code you have provided could cause this error. It happens because in DEV mode, the angular Change detection(CD) is run twice to verify that all variables are in sync with what was informed to Angular in Previous CD . What's happening is that your *ngIf expression being changed after the 1st CD is triggered. Its an error which can create some bugs in your app in later stage. Refer: blog.angularindepth.com/… . Also, read about changeDetectionRef.detectChanges() — Shashank Vivek
@ShashankVivek ty or the help and A.Winnen aswell, i solved it by this — Daniel

A.Winnen A.Winnen · Accepted Answer · 2019-04-14T13:12:59

While this Error can be considered as a warning(it will not be shown in production mode and usually is not harmful to your application), there are ways to avoid this. Since you already use an observable to emit the loggedIn status, the simplest way should be to use the async pipe.

Try to make the authenticationService public and use *ngIf="(authenticationService.loggedIn$ | async); else showLoginBox". No need to store the boolean in your Component.

BehaviourSubject subscription in Component constructor with "*ngIf" throws a "ExpressionChangedAfterItHasBeenCheckedError"

1 Answers