Angular async pipe with ngIf

<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 Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

Angular. Can't set breakpoints in VS Code

Вариант решения проблемы, когда не срабатывают точки остановки при разработке Angular приложений в редакторе VS Code
10 апреля 2018 г. в Angular