Async pipe not working with Subject
15,684
Solution 1
I suspect its the order of operations - you need parenthesis around your subscription:
<li class="login-button" *ngIf="!(authenticated | async)">
Solution 2
I thought of posting a solution using ng-if-else which is maybe even more intuitive in your particular case:
<li class="login-button" *ngIf="(authenticated | async); else unauthenticated">
<a>Logged in</a>
</li>
<ng-template #unauthenticated>
<a (click)="authenticate()">Log in</a>
</ng-template>
Alternatively you could puth both cases inside a ng-template:
<li class="login-button" *ngIf="(authenticated | async); then authenticated else unauthenticated"></li>
<ng-template #authenticated ><a>Logged in</a></ng-template>
<ng-template #unauthenticated><a (click)="authenticate()">Log in</a></ng-template>
Hope it is of any use to other people ending up here.
Related videos on Youtube
Author by
AngularDebutant
Updated on June 04, 2022Comments
-
AngularDebutant almost 2 years
I have the following BehaviorSubject in a service:
isAuthenticated = new BehaviorSubject<boolean>(false);
And I am using it as follows in a component:
authenticated: Observable<boolean>; constructor(private accountService: AccountService) { } ngOnInit() { this.authenticated = this.accountService.isAuthenticated.asObservable(); }
And in the template I do something like :
<li class="login-button" *ngIf="!authenticated | async"> <a (click)="authenticate()">Log in</a> </li> <li *ngIf="authenticated | async"> <a>Logged in</a> </li>
The issue is that I dont see any of the two
li
, although the assumption is that the first one should appear since I am assigning the initial value of the Subject to false.What am I doing wrong?
-
martin over 6 yearsCan you try putting the first expression into parenthesis like
!(authenticated | async)
to make sure it's using theasync
pipe on the Observable and not the result of!authenticated
-