フィルターで絞り込みを行ってから一覧を表示する

検索結果の一覧を表示する際にデータを絞り込みたい場合のフィルターのかけ方について。

必要なものは大きく分けて、フィルターの部品、フィルターを呼び出すコンポーネント、モジュールでの定義、となります。

今回、試してみたディレクトリ、ファイルの構成は以下の通りです。（フィルター用に作成またはコードを追加したファイルのみ表示）

project
├ node_modules
└ src
    └ app
        ├ app.module.ts
        └ example
            ├ example.component.html
            ├ example.component.ts
            ├ example.search.pipe.ts
            └ example.ts

example.search.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { ExampleRow, ExampleSearchFilterArgs } from './example';

@Pipe({
  name: 'exampleSearchFilter',
  pure: false
})
export class ExampleSearchFilterPipe implements PipeTransform {
  transform(items: ExampleRow[], args: ExampleSearchFilterArgs): ExampleRow[] {
    return items.filter(item => {
      if(args.name.length > 0){
        if(item.name.indexOf(args.name) == -1) return false
      }
      return true;
    });
  }
}

example.ts

export class ExampleRow {
  id: number;
  name: string;
}

export class ExampleSearchFilterArgs {
  name: string;
}

example.component.html

<div></div>
<div><input type="text" placeholder="部分一致で絞込" [(ngModel)]="exampleSearchName" (keyup)="changeExampleSearchName()" /></div>
<div *ngFor="let item of exampleRows | exampleSearchFilter:exampleSearchFilterArgs;">
    <span>{{item.id}}</span>
    <span>{{item.name}}</span>
</div>

（「keyup」でキーが押されたタイミングで毎回フィルター処理を実行するようにしています。）

example.component.ts

import { Component } from '@angular/core';
import { ExampleRow, ExampleSearchFilterArgs } from './example';
import { ExampleSearchFilterPipe } from './example.search.pipe';

@Component({
  templateUrl: 'example.component.html'
})
export class ExampleComponent {
  exampleSearchName = "";
  exampleSearchFilterArgs = new ExampleSearchFilterArgs();
  exampleRows:ExampleRow[] = []

  changeExampleSearchName(): void {
    this.exampleSearchFilterArgs.name = this.exampleSearchName;
  }
}

（検索処理も入れるとコードが長くなるので省いています）

app.module.ts

import { NgModule }      from '@angular/core';
import { ExampleSearchFilterPipe } from './example//example.search.pipe';

@NgModule({
  declarations: [
    ExampleSearchFilterPipe,
  ],
})