Search code examples
angularobservable

*ngIf only works sometimes with async pipe

I have a situation where this ngIf is not working some of the time even though I can see the value is correct:

<div id="overlay" *ngIf="isLoading$ | async"></div>
<div class="page-content" [class.inactive]="isLoading$ | async">
    <router-outlet></router-outlet>
</div>

I have the observable twice, and for the [class.inactive] if isLoading is updated I can see the result, but for the ngIf right above it, it only works half the time.

I do have onpush change detection turned on, however that shouldn't matter, also this is a select from NGRX store. I doubt either of these two mentions have are the cause, but just giving the facts.

Update- If I do this it works:

    <div id="overlay" [class.loading]="isLoading$ | async"></div>
    <div class="page-content" [class.inactive]="isLoading$ | async">

        <router-outlet></router-outlet>
    </div>

I would really like to know why this doesn't work with the *ngIf consistently, if anyone has ran into this before please share :)

Solution

  • Answer was offered in comments but not as an answer. The issue is in no form related to angular, it’s something deeper in my code. Marking complete so no one else tries to follow up on this as the answer is nothing is wrong with the code, it’s something else, somewhere else. The work around with the class offered in the question also is a good work around if someone else happens to experience something similar.