Angular 7でMat Checkboxの変更イベントを処理する方法


  1. テンプレート内でのイベントハンドリング: Mat Checkboxの変更イベントを処理するには、テンプレート内でイベントバインディングを使用します。以下の例を参考にしてください。
<mat-checkbox (change)="onCheckboxChange($event)">チェックボックス</mat-checkbox>
onCheckboxChange(event: MatCheckboxChange) {
  if (event.checked) {
    // チェックボックスが選択された場合の処理
  } else {
    // チェックボックスが選択解除された場合の処理
  }
}
  1. フォームコントロールを使用したイベントハンドリング: Mat Checkboxをフォームコントロールとして使用する場合、フォームコントロールの値変更イベントをサブスクライブすることもできます。以下の例をご覧ください。
<mat-checkbox [formControl]="checkboxControl">チェックボックス</mat-checkbox>
checkboxControl: FormControl;
constructor() {
  this.checkboxControl = new FormControl(false);
  this.checkboxControl.valueChanges.subscribe((value) => {
    if (value) {
      // チェックボックスが選択された場合の処理
    } else {
      // チェックボックスが選択解除された場合の処理
    }
  });
}

これらの方法を使用することで、Angular 7でMat Checkboxの変更イベントをシンプルに処理することができます。必要に応じて、上記のコード例をカスタマイズして使用してください。