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 значение.