Angular Hello, World! その4 Pipe

前回作成したコードでは 入力したテキストをひっくりかえすサービスをつくりましたが、 本来この手の処理は Pipe を使う方が Angular 的に自然なので書き直します。 出発点として使うコードは、 前々回作成したコードにします。

Pipe を追加

プロジェクトルートにて:

$ npx ng generate pipe pipe/reverse-text

reverse-text とキャメルケースしてほしい部分にハイフンを入れることでいい感じに名前をつけてくれます。 つまり、クラス名は ReverseTextPipe に パイプ名は reverseText になる。

雛形のコードが作成される:

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

@Pipe({
  name: 'reverseText'
})
export class ReverseTextPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }

}

これ src/app/pipe/reverse-text.pipe.ts を修正する。

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

@Pipe({
  name: 'reverseText'
})
export class ReverseTextPipe implements PipeTransform {

  transform(value: string): string {
    return value.split('').reverse().join('');
  }

}

PipeTransform はインタフェースの定義は次のようになっている。

interface PipeTransform {
  transform(value: any, ...args: unknown[]): any;
}

次のように定義しなおした。

  transform(value: string): string {
    return value.split('').reverse().join('');
  }

@Pipe の name で reverseText と名指しされている。これをパイプ名として使う。

それでは実際に show するときにこのパイプを適用する。

src/app/show/show.component.html の修正:

<div>
  <p>{{textfieldValue | reverseText}}</p>
</div>

元は単に:

  <p>{{textfieldValue}}</p>

となっていたところを reverseText パイプしています。

いきなり show.component.html に reverseText を書いてもビルドはできないので、 show.component.ts に先に定義したパイプを入れます。

src/app/show/show.component.ts の修正:

import { Component, Input } from '@angular/core';
import { ReverseTextPipe } from '../pipe/reverse-text.pipe';

@Component({
  selector: 'app-show',
  imports: [ReverseTextPipe],
  templateUrl: './show.component.html',
  styleUrl: './show.component.css'
})
export class ShowComponent {
  @Input() textfieldValue: string = '';
}

作成しておいたパイプを import して:

import { ReverseTextPipe } from '../pipe/reverse-text.pipe';

@Component の imports に ReverseTextPipe をセット:

@Component({
  ...
  imports: [ReverseTextPipe],

修正点はこれで全部です。

あとは npm start して作動を確かめましょう。