27. パイプ — 値を表示用に整形する

パイプは、テンプレート内で値を「見せ方」に変換する仕組みです。{{ price | currency }} のように縦棒に続けてパイプ名を書くと、元の値はそのままに、表示だけが整形されます。date・currency・uppercase・lowercase・json・percent など、よく使う変換はAngularに最初から用意されています。

実務では、日付を「2026年6月13日」の形にしたり、数値を通貨表記にしたりと、表示の見た目を整える場面で常に使います。{{ date | date:'yyyy/MM/dd' }} のようにコロンに続けて引数を渡せば、書式を細かく指定できます。複数のパイプを縦棒でつなげて、順番に適用することもできます。

注意点は、パイプは表示を変換するだけで元の値そのものは変えない、ということです。また日付や通貨を国・地域に合わせて出すには LOCALE_ID の設定が必要で、これを忘れると意図しない書式になることがあります。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component } from '@angular/core';
import { CurrencyPipe, DatePipe, UpperCasePipe } from '@angular/common';

@Component({
  selector: 'app-receipt',
  imports: [CurrencyPipe, DatePipe, UpperCasePipe],
  // | パイプ名 で表示だけを整形する。: で引数を渡せる
  template:
    '<p>{{ title | uppercase }}</p>' +
    '<p>金額: {{ price | currency:"JPY" }}</p>' +
    '<p>日付: {{ orderedAt | date:"yyyy/MM/dd" }}</p>',
})
export class ReceiptComponent {
  title = 'receipt';
  price = 1280;
  orderedAt = new Date();
}

公式ドキュメントで詳しく ↗