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.


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

let-* $implicit in Angular template

Синтаксис let-* позволяет объявить переменную в шаблоне <ng-template>, использования ключа $implicit позволяет устанавливать значение по-умолчанию для объявленной переменной.

29 августа 2018 г. в Angular

ngx translate attribute

Используется конструкция

<img src="image.jpg" [alt]="'KEY' | translate"> 
20 августа 2018 г. в Angular

Angular Storybook

Установите пакет npm i @storybook/cli -g и запустите команду sb init в корне angular проекта.