カスタムパイプ

組み込みのパイプで提供されていない変換をカプセル化するカスタムパイプを作成します。その後、組み込みのパイプと同じように、カスタムパイプをテンプレート式で使用して、表示のために入力値を出力値に変換します。

クラスをパイプとしてマークする

クラスをパイプとしてマークし、構成メタデータを供給するには、クラスに @Pipe を適用します。

パイプクラス名にはアッパーキャメルケース（クラス名の一般的な慣例）、対応する name 文字列にはキャメルケースを使用します。 name にはハイフンを使用しないでください。

詳細とその他の例については、パイプ名を参照してください。

テンプレート式では、組み込みパイプと同様に name を使用します。

      import { Pipe } from '@angular/core';@Pipe({  name: 'greet',  standalone: true,})export class GreetPipe {}

PipeTransform インターフェースを使用する

カスタムパイプクラスで PipeTransform インターフェースを実装して変換します。

Angularは、バインディングの値を最初の引数として、パラメータを2番目の引数としてリスト形式で transform メソッドを呼び出し、変換された値を返します。

      import { Pipe, PipeTransform } from '@angular/core';@Pipe({  name: 'greet',  standalone: true,})export class GreetPipe implements PipeTransform {  transform(value: string, param1: boolean, param2: boolean): string {    return `Hello ${value}`;  }}

例：値を指数関数的に変換する

ゲームでは、ヒーローのパワーを上げるために値を指数関数的に上げる変換を実装したい場合があります。たとえば、ヒーローのスコアが2の場合、ヒーローのパワーを10で指数関数的にブーストすると、スコアは1024 (2**10) になります。この変換にはカスタムパイプを使用します。

次のコード例は、2つのコンポーネント定義を示しています。

ファイル	詳細
`exponential-strength.pipe.ts`	`transform` メソッドを持つ `exponentialStrength` という名前のカスタムパイプを定義します。このメソッドは変換を実行します。パイプに渡されるパラメータのために、`transform` メソッドに引数（`exponent`）を定義しています。
`power-booster.component.ts`	パイプの使用方法を示し、値（`2`）と指数パラメータ（`10`）を指定しています。

src/app/exponential-strength.pipe.ts

      import {Pipe, PipeTransform} from '@angular/core';/* * Raise the value exponentially * Takes an exponent argument that defaults to 1. * Usage: *   value | exponentialStrength:exponent * Example: *   {{ 2 | exponentialStrength:10 }} *   formats to: 1024 */@Pipe({  standalone: true,  name: 'exponentialStrength',})export class ExponentialStrengthPipe implements PipeTransform {  transform(value: number, exponent = 1): number {    return Math.pow(value, exponent);  }}

src/app/power-booster.component.ts

      import {Component} from '@angular/core';import {ExponentialStrengthPipe} from './exponential-strength.pipe';@Component({  standalone: true,  selector: 'app-power-booster',  template: `    <h2>Power Booster</h2>    <p>Super power boost: {{2 | exponentialStrength: 10}}</p>  `,  imports: [ExponentialStrengthPipe],})export class PowerBoosterComponent {}