カスタムパイプの作成

Angularでデータ変換のニーズに合わせてカスタムパイプを作成できます。

このアクティビティでは、カスタムパイプを作成してテンプレートで使用します。

パイプは @Pipe デコレーターを付けたTypeScriptクラスです。例を挙げます。

      
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
  standalone: true,
  name: 'star',
})
export class StarPipe implements PipeTransform {
  transform(value: string): string {
    return `⭐️ ${value} ⭐️`;
  }
}

StarPipe は文字列値を受け取り、その文字列を星で囲んだものを返します。以下の点に注意してください。

  • @Pipe デコレーターの構成の name は、テンプレートで使用される名前です。
  • transform 関数は、ロジックを記述する場所です。

では、実際に試してみましょう。ReversePipe を作成します。

  1. ReversePipe の作成

    reverse.pipe.ts で ReversePipe クラスに @Pipe デコレーターを追加し、次の構成を指定します。

          
    @Pipe({
        standalone: true,
        name: 'reverse'
    })

  2. transform 関数の実装

    これで、ReversePipe クラスはパイプになります。transform 関数を更新して、反転ロジックを追加します。

          
    export class ReversePipe implements PipeTransform {
        transform(value: string): string {
            let reverse = '';
            for (let i = value.length - 1; i >= 0; i--) {
                reverse += value[i];
            }
            return reverse;
        }
    }

  3. テンプレートで ReversePipe を使用する

    4. パイプロジックを実装したら、最後のステップとしてテンプレートで使用します。app.component.ts でテンプレートにパイプを含め、コンポーネントのインポートに追加します。

          
    @Component({
        ...
        template: `Reverse Machine: {{ word | reverse }}`
        imports: [ReversePipe]
    })

これにて終了です。このアクティビティの完了、おめでとうございます。これでパイプの使い方と、独自のパイプを実装する方法がわかりました。