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.


Похожие записи

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

Angular dependency injection

Определение Provider (useClass, useValue, useFactory ), Injector. Декоратор @Inject, ключ multi: true

13 ноября 2018 г. в Angular