- テンプレート内でのイベントハンドリング: Mat Checkboxの変更イベントを処理するには、テンプレート内でイベントバインディングを使用します。以下の例を参考にしてください。
<mat-checkbox (change)="onCheckboxChange($event)">チェックボックス</mat-checkbox>
onCheckboxChange(event: MatCheckboxChange) {
if (event.checked) {
// チェックボックスが選択された場合の処理
} else {
// チェックボックスが選択解除された場合の処理
}
}
- フォームコントロールを使用したイベントハンドリング: 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の変更イベントをシンプルに処理することができます。必要に応じて、上記のコード例をカスタマイズして使用してください。