Evaluating *ngIf with observable value inside condition

Question

I am having difficulty in understanding why using *ngIf in below mentioned way throws Template Parse Error: Parser Error: Missing expected ) at ...

<ng-container *ngIf="true && (temp$ | async as temp)">
  {{temp}}
</ng-container>

Where as refactoring the above code works

<ng-container *ngIf="true">
  <ng-container *ngIf="temp$ | async as temp">
    {{temp}}
  <ng-container>
</ng-container>

Can I do this without using nested containers?

Answer 1

What you are probably looking for is the following (you just need to move the closing parenthesis):

<ng-container *ngIf="true && (temp$ | async) as temp">
  {{temp}}
</ng-container>