Issue
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.
Solution
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.
Answered By - A.Winnen
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.