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.


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

#local variable внутри *ngIf

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

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

Angular dependency injection

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

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

Переиспользуемые анимации в Angular

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.

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