Well i have been really confused after doing some ngIf that didn’t seem to work.
The problem had to do with expression evaluation order. Sometimes it seems that
the solution is right in front of you but you can’t see it.
So, i had something like this:
<div *ngIf="!isLoggedIn | async; else loggedinDiv">
You are not loggedIn!
</div>
<ng-template #loggedinDiv>
<div>
You are loggedin! Yes!
</div>
</ng-template>
You are not loggedIn!
</div>
<ng-template #loggedinDiv>
<div>
You are loggedin! Yes!
</div>
</ng-template>
It always showed the ‘You are loggedin! Yes!’ message.
Even when isLoggedIn changed from false to true and vice versa.
The explanation was simple and had to do with the evaluation order:
#In my component:
isLoggedIn: Observable<boolean>;
#In my template
#The !isLoggedIn is evaluated first and gives true or false
#while async is expecting an observable!
(!isLoggedIn) | async
isLoggedIn: Observable<boolean>;
#In my template
#The !isLoggedIn is evaluated first and gives true or false
#while async is expecting an observable!
(!isLoggedIn) | async
The solution is:
<div *ngIf="!(isLoggedIn | async); else loggedinDiv">
The above was made clear thanks to Seth Davenport’s post here: https://github.com/angular-redux/store/issues/375
Cheers 🙂