*ngIf not working as expected with observable

angular angular-ng-if
RiesvGeffen picture RiesvGeffen · Apr 3, 2018 · Viewed 15.8k times · Source

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!

Answer

Tomasz Kula picture Tomasz Kula · Apr 3, 2018

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>

Related questions

*ngIf and *ngFor on same element causing error

I'm having a problem with trying to use Angular's *ngFor and *ngIf on the same element. When trying to loop through the collection in the *ngFor, the collection is seen as null and consequently fails when trying to access its …

Read More
Angular 4 default radio button checked by default

I'm trying to mark as a default a radiobutton depending on the value I get from my object, it can be True or False. What could I do to mark as a default radiobutton depending on the option? <label&…

Read More
*ngIf else if in template

How would I have multiple cases in an *ngIf statement? I'm used to Vue or Angular 1 with having an if, else if, and else, but it seems like Angular 4 only has a true (if) and false (else) condition. According to …

Read More