パイプは、|演算子を使ってテンプレート内で直接データを表示用に変換します。値のフォーマット（日付、通貨、テキスト）を行い、基になるデータを変更したり、コンポーネントに変換ロジックを書いたりする必要がありません。
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
左側の値がパイプを通されます。引数はコロン（date:'longDate'）の後に続きます。
<p>{{ today | date:'fullDate' | uppercase }}</p> <!-- pipes apply left to right -->
<!-- subscribes to an Observable/Promise and auto-unsubscribes -->
<div>{{ user$ | async }}</div>
<li *ngFor="let item of items$ | async">{{ item.name }}</li>
asyncは特に重要です。Observable（例えばHTTPの結果）を購読し、発行された値を描画し、コンポーネントが破棄されるときに自動的に購読を解除します。手動の購読管理なしでメモリリークを防ぎます。
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "truncate" })
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 20): string {
return value.length > limit ? value.slice(0, limit) + "…" : value;
}
}
// usage: {{ longText | truncate:50 }}
Pure (default): re-runs only when the input REFERENCE changes → efficient (cached)
Impure: re-runs on every change detection cycle → use sparingly (e.g. filtering)
Pure パイプはキャッシュされ、入力が変わるときだけ再計算されるため、パフォーマンスに優れています。
パイプは、データのフォーマットを宣言的に保ち、テンプレート内に置くことで、コンポーネントロジックから分離されます。再利用可能で、連鎖可能で、（pure パイプの場合）効率的です。
組み込みパイプは一般的なフォーマットをカバーし、カスタムパイプはアプリ固有の変換を処理します。asyncパイプは、Observable データを表示するための慣例的でリークのない方法です。これはAngularで常に使用するパターンです。