angular-pipes

Angular パイプ

バージョン： Angular 21（2025） タグ： パイプ、変換、フォーマット、非同期

参考資料： パイプガイド • API

API の変更点

このセクションでは、最近のバージョン固有の API の変更点について説明します。

• 新機能：スタンドアロンパイプ — すべてのパイプをスタンドアロンにできます

• 新機能：シグナルベースのパイプ — パイプでシグナルを使用できます

• 新機能：パイプ内の inject() — パイプで関数型 DI を使用できます

• 非推奨：インピュアパイプ — パフォーマンス上の理由から避け、ピュアパイプを使用してください

ベストプラクティス

• ステートレスな変換にはピュアパイプを使用する

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'capitalize',
  standalone: true
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

• テンプレート内でパイプを使用する

@Component({
  template: `
    <p>{{ name | capitalize }}</p>
    <p>{{ price | currency:'USD' }}</p>
    <p>{{ items | json }}</p>
  `
})
export class MyComponent {}

• パラメーターを指定してパイプを使用する

@Pipe({ name: 'slice' })
export class SlicePipe implements PipeTransform {
  transform(value: string, start: number, end?: number): string {
    return value.slice(start, end);
  }
}

// Usage: {{ text | slice:0:10 }}

• Observable には async パイプを使用する

@Component({
  template: `
    @if (user$ | async; as user) {
      <p>{{ user.name }}</p>
    }
  `
})
export class UserComponent {
  user$ = this.userService.getUser();
}

• 必要な場合に限りインピュアパイプを使用する

@Pipe({
  name: 'myPipe',
  pure: false // Impure - runs on every change detection
})
export class ImpurePipe implements PipeTransform {}

• オブジェクトの反復処理には KeyValue パイプを使用する

@Component({
  template: `
    @for (item of object | keyvalue; track item.key) {
      {{ item.key }}: {{ item.value }}
    }
  `
})
export class MyComponent {
  object = { a: 1, b: 2 };
}

• デバッグには Json パイプを使用する

@Component({
  template: `
    <pre>{{ object | json }}</pre>
  `
})
export class DebugComponent {}

• パイプを連結する

@Component({
  template: `
    {{ name | uppercase | slice:0:5 }}
  `
})
export class ChainedPipeComponent {}

• インポートではスタンドアロンパイプを使用する

@Component({
  standalone: true,
  imports: [DatePipe, CurrencyPipe, CapitalizePipe],
  template: `{{ date | date }}`
})
export class MyComponent {}

• パイプ内で inject() を使用する

@Pipe({ name: 'translate', standalone: true })
export class TranslatePipe implements PipeTransform {
  private service = inject(TranslateService);

  transform(key: string): string {
    return this.service.get(key);
  }
}