When using the AsyncPipe inside of an *ngIf, if the Observable connected to the AsyncPipe pushes its values before the *ngIf becomes true, the value returned from the AsyncPipe will be incorrect.


<div *ngIf="showPipe">
    <div *ngFor="let item of arrObs | async">{{item}}</div>


  1. showPipe is false
  2. arrObs pushes [1,2,3]
  3. showPipe is set to true

From what I've seen, the *ngFor will act as if arrObs | async returned null.

One solution to this problem is to use [hidden] instead, but there are a lot of benefits to *ngIf, like performance and making null handling easier.