Ionic: button that unchecks all checkboxes - html

Question

I have a checkbox list setup that will add the selected items into an array which sends it to a service. I have a button that runs a function that empties the array on click, but the checkboxes remain checked.
Here I select items and the red X appears, clicking that will clear the array.
Here is after I click the X, the array clears, but the items remain checked
page.ts
if (this.checkedItems.includes(item)) {
this.checkedItems = this.checkedItems.filter((value) => value != item);
} else {
this.checkedItems.push(item)
}
console.log(this.checkedItems);
}
createRoutine() {
this.workoutService.selectedWorkouts = this.checkedItems;
console.log(this.checkedItems);
}
uncheckAll(){
this.checkedItems = [];
}
page.html
<div>
<ion-searchbar placeholder="Search..." [(ngModel)]="filterTerm" animated="true"></ion-searchbar>
<ion-list class="accordion-list">
<ion-card size="full" >
<ion-card-header>
<ion-item class="workout-title">
<ion-card-title> Workouts</ion-card-title>
<a slot="end"><ion-icon name="close-outline" size="large" color="bic" *ngIf="checkedItems.length > 0" (click)="uncheckAll()"></ion-icon></a>
</ion-item>
</ion-card-header>
<ion-card-content>
<ion-list *ngFor="let workout of bic | filter:filterTerm | orderBy:'asc':'muscle'; let i = index;" class="workout-list" >
<ion-item>
<ion-label>{{workout.name}}</ion-label>
<ion-note>{{workout.muscle}}</ion-note>
<ion-checkbox slot="end" color="bic" (ionChange)="onChange(workout)"></ion-checkbox>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-list>
</div>
So I'm looking for a solution on how to have the uncheckAll() event uncheck the checkboxes after clearing the array.

Answer 1

You need to have an [(ngModel)] for the check box, that will hold the checked status of check box. This should be bounded with the workout node.
We can mark it as [(ngModel)]="workout.isSelected" for example.
Inside uncheckAll loop through the array of bic and set the isSelected of each node as false
Pseudo Codes
Template
<ion-list *ngFor="let workout of bic | filter:filterTerm | orderBy:'asc':'muscle'; let i = index;" class="workout-list">
<ion-item>
<ion-label>{{workout.name}}</ion-label>
<ion-note>{{workout.muscle}}</ion-note>
<ion-checkbox
slot="end"
color="bic"
[(ngModel)]="workout.isSelected"
(ionChange)="onChange(workout)"></ion-checkbox>
</ion-item>
</ion-list>
Component.ts
uncheckAll(){
this.checkedItems = [];
this.bic.forEach(node => node.isSelected = false);
}