Angular - Async Pipe - Template Binding Behavior

Question

I am binding an observable to my Angular template and having conditional binding to show 'loading..' message till async pipe resolves the data.

The binding works fine and i am getting the data and the 'loading..' message getting triggered till i get the data.

<div *ngIf=" (combinedResult$ | async )  as favData ;else  loading"> 
   <p> {{ Binding Goes here}} </p>
</div>

<ng-template #loading>
       loading...   
</ng-template>

but if i change *ngIf by wrapping the result into "details:" object, then the if condition is not working and i could not see the 'loading..' message. ( But data is binding ).

 <div *ngIf=" { details: (combinedResult$ | async ) } as favData  
   ;else  loading">

      <p> {{ Binding Goes here}} </p>

  </div>

What am i missing here..?

Answer 1

In this, *ngIf="{ details: (combinedResult$ | async ) } as favData; else loading"

{ details: (combinedResult$ | async ) } always evaluates to true as it is not a condition but an assignment.

So it will never show the loading as the ngIf always evaluates to true