Angular async パイプで HTML テンプレートに独自クラスのオブジェクトを表示

タイトルのままです。Angular で取り扱う独自クラスのオブジェクトのデータを、async パイプを使って HTML テンプレート上に表示する方法です。

例えば、独自実装の Album クラスオブジェクトの Observable (ここの例では album$)を受け取るコンポーネントがあった場合、コンポーネントの HTML テンプレート上では、async の後に別の変数を用意して受けます。この変数には album$ | async の評価後の値が入るので、HTML テンプレート内で利用することができます。

HTML テンプレート

<div *ngIf="album$ | async as album">
  <div>{{album.title}}</div>
</div>

コンポーネント

export class AlbumDetailComponent implements OnInit {
  ...

  album$: Observable<Album>;

  ngOnInit() {
    this.album$ = this.service.getAlbum();
  }
}