So I have these 2 buttons:
<a class="router-link nav-item" routerLink="/login" *ngIf="!isLoggedIn$ | async">
Login
</a>
<a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn$ | async">
Logout
</a>
And the logout button works perfectly, as soon as the user is logged in the button appears. But the login button never appears.
This is the code behind the isLoggedIn$
:
isLoggedIn$: Observable<boolean>;
ngOnInit() {
this.isLoggedIn$ = this.authService.isLoggedIn;
}
AuthService:
private loggedIn = new BehaviorSubject<boolean>(false);
get isLoggedIn() {
return this.loggedIn.asObservable();
}
Hope this is enough information and the problem is clear, thanks in advance!
Put the async pipe in parenthesis.
<a class="router-link nav-item" routerLink="/login" *ngIf="!(isLoggedIn$ | async)">
Login
</a>
<a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn$ | async">
Logout
</a>
I like the answer with *ngIf and Else
approach, but your version can also be optimized to prevent double subscription.
<ng-container *ngIf="{ isLoggedIn: (isLoggedIn$ | async) } as observables">
<a class="router-link nav-item" routerLink="/login" *ngIf="!observables.isLoggedIn">
Login
</a>
<a class="router-link nav-item" (click)="onLogout()" *ngIf="observables.isLoggedIn">
Logout
</a>
</ng-container>
You can also refactor to use the else part of ngIf directive:
<a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn$ | async; else loginBlock">
Logout
</a>
<ng-template #loginBlock>
<a class="router-link nav-item" routerLink="/login">
Login
</a>
</ng-template>
You can see more examples in the docs.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With