28. カスタムパイプ — @Pipe で独自の整形を作る

用意されたパイプで足りないときは、自分でパイプを作れます。@Pipe({ name: 'truncate' }) を付けたクラスに transform(value, ...args) メソッドを実装すると、テンプレートで {{ text | truncate:20 }} のように使えるようになります。transform の第1引数が変換前の値、2つ目以降がコロンで渡した引数で、戻り値が表示される値になります。

実務では「長い文章を指定文字数で切って末尾に … を付ける」「電話番号にハイフンを入れる」など、そのアプリ特有の整形をカスタムパイプにまとめます。変換ロジックがテンプレートから切り離されて再利用でき、複数の画面で同じ整形を使い回せるのが利点です。

つまずきやすいのは、入力が null や空文字のケースです。transform の中で値が空のときの戻り値を決めておかないと、表示が崩れたりエラーになったりします。下のコードは、その transform の中身をプレーンなTypeScript関数として取り出し、入力と出力の関係だけを確かめられるようにしたものです。