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.


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

Angular environment variables

Создание и использования переменных окружения в Angular с использованием CLI >= 6 версии.

08 января 2019 г. в Angular

#local variable внутри *ngIf

Представлены 2 варианта решения, как сослаться на локальную переменную шаблона (#myVar) за пределами шаблона:

  • @ViewChild
  • @ViewChildren
13 февраля 2019 г. в Angular

Angular setter

Пример задания значения булева Input свойства как директивы, на примере:

09 октября 2018 г. в Angular