【Angular Material】mat-selectのイベントが2種類しかないのでどっちか選ぶしかない。

<mat-select multiple="{{true}}" [(value)]="selectedLanguage" (openedChange)="changeLanguage()">
 <mat-option *ngFor="let item of languageList" [value]="item.id">{{ item.name }}</mat-option>
</mat-select>

公式ドキュメントを見るとmat-selectで発生するイベントは2つしか書かれていない。
以下の2つ。
openedChange:選択パネルが切り替えられたときに発生するイベント。
selectionChange:選択された値がユーザーによって変更されたときに発生されるイベント。
2つかしかないので、一方が気にいらないなら、別の方を選べばいい(というか選ぶしかない)。

例えば、
multiple="{{true}}の場合
(selectionChange)は、チェックする度にchangeLanguage()メソッドが動く。
場合によってはすごく無駄。
すべて選んでから1回だけ処理が動いてほしいときは(openedChange)を選択するとよい。
メニューが閉じたときに1回だけchangeLanguage()が動いてくれる。

この記事が気に入ったらサポートをしてみませんか?