【Angular】カスタムパイプでドロップダウン項目を連動させる

実現したいこと

• 特定のリストの範囲を選択するのに、開始と終了のドロップダウンを使いたい
• 開始が選択されたら、終了のドロップダウンには**選択された開始以降の項目のみ*
  *を表示したい
• 同様に、終了が選択されたら、開始のドロップダウンには選択された終了以前の項目のみを表示したい

曜日リストの例

初期状態

開始に【水】を選択した場合、終了には【水、木、金、土】のみ表示される

終了に【金】を選択した場合、開始には【日、月、火、水、木、金】のみ表示される

環境

node.js

root@user:/app/my-app# node --version
v12.7.0

Angular

package.json

"dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0"
}

ソースコード

コンポーネント

app.component.ts

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

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {
  days = ['日', '月', '火', '水', '木', '金', '土'];
  startDay: string;
  endDay: string;

  constructor() {}

  ngOnInit() {
    // 初期値の設定
    this.startDay = this.days[0];
    this.endDay = this.days[this.days.length - 1];
  }
}

カスタムパイプ

dayfilter.pipe.ts

@Pipe({ name: 'dayFilter' })
export class DayFilterPipe implements PipeTransform {
  transform(days: string[], startDay?: string, endDay?: string) {
    if (startDay) {
      const index = days.findIndex(day => day === startDay);
      return days.slice(index);
    }
    if (endDay) {
      const index = days.findIndex(day => day === endDay);
      return days.slice(0, index + 1);
    }
    return days;
  }
}

テンプレート

*ngForにカスタムパイプを設定する。

app.component.html

<div>
  <label>開始</label>
  <select [(ngModel)]="startDay">
    <option
      [ngValue]="day"
      *ngFor="let day of days | dayFilter: undefined:endDay"
      >{{ day }}</option
    >
  </select>
  <label>終了</label>
  <select [(ngModel)]="endDay">
    <option
      [ngValue]="day"
      *ngFor="let day of days | dayFilter: startDay:undefined"
      >{{ day }}</option
    >
  </select>
</div>

モジュール

カスタムパイプをdeclarationsに追加する。

app.module.ts

import { DayFilterPipe } from './dayfilter.pipe';

@NgModule({
  declarations: [
    // other imports ...
    DayFilterPipe
  ]
export class AppModule {}

最後に

パイプは開始用と終了用で分けたほうがいいかも。

参考

• Pipes