Observableを使用すると、アプリケーションの各部分間でメッセージを渡すことができます。 Observableは、イベント処理、非同期プログラミング、複数値の処理に使用できます。 Observableは、同期的に（関数が呼び出し元に値を渡すように）、またはスケジュールに従って非同期的に、任意の型の単一値または複数値を提供できます。
組み込みの AsyncPipe を使用して、Observableを入力として受け取り、入力に自動的にサブスクライブします。
このパイプがない場合、コンポーネントコードはObservableの値を使用するためにObservableにサブスクライブし、解決された値を抽出してバインディングのために公開し、Observableが破棄されたときにサブスクライブを解除してメモリリークを防ぐ必要があります。
AsyncPipe は、Observableから値が到着するたびにサブスクリプションを維持し、そのObservableから値を提供し続けるためにコンポーネントの定型コードを節約するパイプです。
次のコード例では、メッセージ文字列 (message$) のObservableを、async パイプを使用してビューにバインドしています。
src/app/hero-async-message.component.ts
import {Component} from '@angular/core';import {AsyncPipe} from '@angular/common';import {Observable, interval} from 'rxjs';import {map, startWith, take} from 'rxjs/operators';@Component({ standalone: true, selector: 'app-hero-async-message', template: ` <h2>Async Messages and AsyncPipe</h2> <p>{{ message$ | async }}</p> <button type="button" (click)="resend()">Resend Messages</button>`, imports: [AsyncPipe],})export class HeroAsyncMessageComponent { message$: Observable<string>; private messages = ['You are my hero!', 'You are the best hero!', 'Will you be my hero?']; constructor() { this.message$ = this.getResendObservable(); } resend() { this.message$ = this.getResendObservable(); } private getResendObservable() { return interval(1000).pipe( map((i) => `Message #${i + 1}: ${this.messages[i]}`), take(this.messages.length), startWith('Waiting for messages...'), ); }}