Angular. async pipe with ngIf

Обычный *ngIf else

<ng-container
  *ngIf="loading; then preloader; else data">
</ng-container>

<ng-template #preloader>
  <preloader inline view="overlay" size="15"></preloader>
</ng-template>

<ng-template #data>
  <img [src]="src" width="15" height="15">
</ng-template>

ngIf async pipe

<div *ngIf="(user$ | async) as user; else loading">
  <h1>{{user.firstName}} {{user.lastName}}</h1>
  <publications [publications]="user.publications"></publications>
</div>

<ng-template #loading>
  Загрузка...
</ng-template>

В примере user$ - Observable

Суффикс доллара используется для обозначения переменной являющейся экзмепляром Observable.

Обратите внимание на «as user» в конце выражения. Перменной user будет присвоено значение (user$ | async), когда оно будет доступно. Скобки добавлены для читаемости. Перменная user должная использоваться внутри структурной директивы *ngIf.

Два потока

<ng-container
  *ngIf="
    {
      group: group$ | async,
      config: config$ | async
    } as data;
  "
  [formGroup]="data.group"
  (ngSubmit)="onSubmit()"
></ng-container>

else loading в данном случае добавить не получится так как в любом случае будет возвращаться truthy значение.

• Handling Observables with NgIf and the Async Pipe
• Angular Async Data Binding with ngIf and ngElse