Ionic 7 Indeterminate Checkboxes Select/Unselect All Values

In this Ionic tutorial, you will learn how to select and unselect all values of a checkbox in an Ionic Angular app using Indeterminate prop with the ion-check component.The Ionic team launched Checkbox Indeterminate state in Ionic Hydrogen.

The Indeterminate state in Ionic is advantageous for the scenarios where you need to select all or check all the checkboxes items.

Ideally, Indeterminate state means that some of the checkboxes are checked among all the checkbox elements. Moreover, If any action taken on the parent checkbox then the action is directly visible on the child checkbox item.

Install Ionic Project

To get started with Ionic checkbox tutorial we need to run the following commands to set a new Ionic project.

However, you may skip this step if you have already set up an Ionic app.

# Update Ionic CLI
sudo npm update -g ionic

# Create new Ionic app
ionic start ionic-checkbox blank --type=angular

# Enter inside project
cd ionic-checkbox

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Select/Unselect All Checkboxes Items with Ionic Indeterminate State

Add the ion-checkbox Ionic component to configure the checkbox in an Ionic app.

On the parent checkbox input field include indeterminate property to enable indeterminate state. It works on the boolean pattern and also don’t forgot to bind click event with ngModel.

Attach Angular’s *ngFor directive to iterate a superheroes list.

We created child checkboxes list with Ionic checkbox component and define ionChange() event.

<ion-list lines="full">
  <ion-item>
    <ion-label><strong>Superheroes - Select All</strong></ion-label>
    <ion-checkbox slot="start" [(ngModel)]="checkParent" [indeterminate]="indeterminateState"
      (click)="checkCheckbox($event)"></ion-checkbox>
  </ion-item>
</ion-list>

<ion-list>
  <ion-item *ngFor="let checkboxes of Checkboxes">
    <ion-label>{{checkboxes.value}}</ion-label>
    <ion-checkbox slot="start" [(ngModel)]="checkboxes.isItemChecked" (ionChange)="verifyEvent()">
    </ion-checkbox>
  </ion-item>
</ion-list>

Define the superheroes list and inject it into the constructor. The checkCheckbox() uses the forEach method to select and unselect all elements.

The verifyEvent() method is counting total checked items and managing the main checkbox state.

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {
  indeterminateState: boolean;
  checkParent: boolean;
  Checkboxes: any;

  constructor() {
    this.Checkboxes = [
      {
        value: 'Captain Marvel',
        isItemChecked: false,
      },
      {
        value: 'Thor',
        isItemChecked: false,
      },
      {
        value: 'Iron Man',
        isItemChecked: false,
      },
      {
        value: 'Spider Man',
        isItemChecked: false,
      },
      {
        value: 'Loki',
        isItemChecked: false,
      },
    ];
  }

  checkCheckbox() {
    setTimeout(() => {
      this.Checkboxes.forEach((item: any) => {
        item.isItemChecked = this.checkParent;
      });
    });
  }

  verifyEvent() {
    const allItems = this.Checkboxes.length;
    let selected = 0;

    this.Checkboxes.map((item: any) => {
      if (item.isItemChecked) selected++;
    });

    if (selected > 0 && selected < allItems) {
      // One item is selected among all checkbox elements
      this.indeterminateState = true;
      this.checkParent = false;
    } else if (selected == allItems) {
      // All item selected
      this.checkParent = true;
      this.indeterminateState = false;
    } else {
      // No item is selected
      this.indeterminateState = false;
      this.checkParent = false;
    }
  }
}

Conclusion

Finally, we have completed the Ionic checkbox tutorial. In this tutorial, we learned to work with Ionic checkboxes. We understood what an Indeterminate state is with a practical example.

Lastly, we looked at how to Select and Unselect all items from an Ionic checkbox list.