Angular : uncheck indeterminate checkbox not working

Question

I have very simple requirement. Lets say checkbox has three states, indeterminate, checked & unchecked. What I want :

When click on indeterminate checkbox it should uncheck
When click on checked checkbox it should uncheck
When click on unchecked checkbox it should checked

But in angular2 I am not able to get solve first requirement. Whatever I do, when click on indeterminate checkbox it get checked (Not expected).

Please check stackbliz

export class AppComponent {
  name = 'Angular';
  milestone = { status: "crossed" };
  checkMilestone(milestone) {
    switch (milestone.status) {
      case "crossed": {
        milestone.status = "unchecked";
        break;
      }
      case "unchecked": {
        milestone.status = "checked";
        break;
      }
      case "checked": {
        milestone.status = "unchecked";
        break;
      }
    }
  }
}

HTML

<input type="checkbox" [indeterminate]="milestone?.status === 'crossed'" [checked]="milestone?.status === 'checked'" (change)="checkMilestone(milestone)"> Status: {{ milestone?.status }}

I want to implement parent child checkbox and select all functionality similar to this fiddle but in angular.

I can recall about an angular reminder about checkboxes and model binding against checked property: as long as I can remember, the checked property doesn't work (or better, is ignored) when the model change, but I might be wrong. Did you try binding a model instead? you could just use one condition, which is setting indeterminate if the model is either null or undefined. — briosheje
I mean something like that: stackblitz.com/edit/angular-checkbox-states-hgy56j?file=src/app/… — briosheje
@briosheje Thank you so much! Its working as you suggested !! — Dipak Telangre

Joseph Wu Joseph Wu · Accepted Answer · 2020-09-11T13:09:27

Yes, you can achieve that, just update the code to the following:

HTML:

<input #input type="checkbox" [indeterminate]="milestone?.status === 'crossed'" 
(click)="checkMilestone($event)"
> Status: {{ milestone?.status }}

TypeScript:

  checkMilestone(e) {
    
    switch (this.milestone.status) {
      case "crossed": {
        e.target.checked = false;
        this.milestone.status = "unchecked";
        break;
      }
      case "unchecked": {
        this.milestone.status = "checked";
        break;
      }
      case "checked": {
        this.milestone.status = "unchecked";
        break;
      }
    }
  }

something for reference: Prevent checkbox from ticking/checking COMPLETELY

Angular : uncheck indeterminate checkbox not working

1 Answers