Three state checkbox in Angular

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;
    }
}

Post a Comment

Previous Post Next Post