"Deselect all checkboxes" not working with angular property binding

Question

I have used property binding in angular to deselect all checkboxes, but it is not working as expected. What i expected: After selecting one or more checkboxes when i click 'clear' button it should deselect all checkboxes. here is my plunker

isSelected is the boolean variable which i have used to set the 'checked' attribute of checkbox. 

template:

<div *ngFor="let item of items">
    <input [checked]="isSelected" type="checkbox">{{item}}
</div>
<button (click)="onClear()">Clear All</button>

Component

private items = ['a', 'b', 'c', 'd'];
  private isSelected = false;
  constructor() {
  }

  onClear(){
    this.isSelected = false;
  }

Answer 1

Set ngModel on your checkboxes and track the changes with ngModelChange. Also Set an auxiliary array to help you track the checked status. Here is a (simplified) example:

HTML

<input [ngModel]="isSelected[i]" (ngModelChange)="onChange(i)" type="checkbox">{{item}}

Typescript

 isSelected =  [];
 constructor() {
   this.onClear();
 }

 onChange(i){
    this.isSelected[i]=!this.isSelected[i]
  }
  onClear(){
    this.isSelected = [false, false, false, false];
  }

DEMO