Pipe経由で処理を呼び出す


AngularでPipeを経由して処理を呼び出しその結果を表示する方法

例えば、HTML内で配列を処理する際にある条件に合致するものしか対象としないようにする。

item.model.ts

export class ItemModel {
  status : boolean;
  value : string;
}

sample.component.html

<!-- listの中でstatusがtrueのものを対象とする -->
<div *ngFor="let item of list | callback : filter">{{item.value}}</div>

sample.component.ts

export class SampleComponent {
  // データ一覧
  list : ItemModel[];

  /**
   * Pipeを経由して呼び出される関数
   */
  filter(item : ItemModel) : boolean {
    //statusがtrueのもののみ対象とする
    return item.status;
  }
}

callback.pipe.ts

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

@Pipe( {
  name: 'callback',
  pure: false
} )
export class CallbackPipe implements PipeTransform {
  transform( items: any[], callback: (item : any ) => boolean ): any {
    if (!items || !callback ) {
      return items;
    }
    return items.filter( item => callback( item ) );
  }
}