Angular：取消选中不确定复选框不起作用

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.

Answer 1

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