mat checkbox not clearing when cancel form button clicked - angular-material

Question

I have a list of cities in a form with check box. when trying cancel form , the list of checkboxes checked are not clearing . but when i uncheck each of the checkbox, it works
api-model.ts
export interface City{
city_Name: string;
}
class-model.ts
export class eModel {
cityList: Array<City>=[];
}
app.html
<div class="row">
<div class="column-3">
<div *ngFor="let data of cityData; let i=index">
<mat-checkbox color="primary" (change)="getCheckboxValues(data, i, $event)" >
{{data.city_Name}}
</mat-checkbox>
</div>
</div>
</div>
<button mat-raised-button class="cancel-button" (click)="Cancel()">Cancel</button>
app.ts
cityData: City[] = [];
ngOnInit(): void {
this.eModel.cityList = [];
loadCityList();
}
loadCityList() {
return this._getAPIservice.getCity().subscribe(data => {
this.cityData = data;
});
}
Cancel(): void {
this.eForm.resetForm({});
loadCityList();
this.eModel.cityList = [];
}

Answer 1

This can be achieved by using element reference variable.
Try this:
<div class="row">
<div class="column-3">
<div *ngFor="let data of cityData; let i=index">
<mat-checkbox #chkboxes color="primary" (change)="getCheckboxValues(data, i, $event)" >
{{data.city_Name}}
</mat-checkbox>
</div>
</div>
</div>
<button mat-raised-button class="cancel-button" (click)="Cancel()">Cancel</button>
In ts:
#ViewChildren('chkboxes') chkboxes: QueryList<any>; // Define this at the top
Cancel(){
this.chkboxes.forEach(x => x.checked = false);
}