How to handle `ngIf` with async pipe values?

Question

I am trying to implement the ngIf with using async pipe. but not works. any one help me here?

here is my html:

<div class="response-container">
    xx {{response | async | json }}
    <div class="failed-error" *ngIf="(response.responseFail | async )">
        {{response.message}}
    </div>
    <div class="success-msg" *ngIf="(response.responseSucc | async) === 'true' ">
        {{response.message}}
    </div>
</div>

in the above xx {{response | async | json }} it prints as:

xx { "responseFail": false, "responseSucc": true, "message": "success" }

But why this is not works with *ngIf condition?

Answer 1

The response is a data source while response.responseFail is not one. Try this:

*ngIf="(response | async )?.responseFail"

*ngIf="(response | async)?.responseSucc  === 'true' "

Answer 2

you have to access the object after the async pipe =>

*ngIf="(response | async )?.responseFail"

ex =>

https://stackblitz.com/edit/angular-tvmqzm

edit : ethan got here first.