Ionic: button that unchecks all checkboxes

Issue

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.

Solution

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);
}

Answered By - Nitheesh