New browsers support three states for a checkbox - true, false and indeterminate.
Let's see how to control it with Angular:
<input type="checkbox" [indeterminate]="isChecked == null" [checked]="isChecked" (click)="onCheckBoxClicked()">
And in the TS file:
isChecked: boolean | null = null;
onCheckBoxClicked() {
if (this.isChecked == null) {
this.isChecked = true;
} else if (this.isChecked == true) {
this.isChecked = false;
} else if (this.isChecked == false) {
this.isChecked = null;
}
}
Tags
Angular