Ionic 5 Indeterminate Checkboxes Tutorial – Select/Unselect All Values

Last updated on by Digamber
In this Ionic 5 tutorial, we will learn how to select and unselect all values of a checkbox in an Ionic/Angular 8 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.

In Indeterminate state means in Ionic 5 that some of the checkboxes are checked among all the checkbox elements.

If any action taken on the parent checkbox then the action is directly visible on the child checkbox list.

Ionic Indeterminate Checkbox

Also Check

You must checkout the tutorial which i previously created on Ionic.
Ionic 5 Form Validation Tutorial with Reactive Forms
Create Login and Register UI with Ionic/Angular
Working with Ionic 5 DateTime Picker

Install Ionic Project

To get started with Ionic checkbox tutorial we need to run the following commands to set a new Ionic project. You can 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

Select/Unselect All Checkboxes Items with Ionic 5 Indeterminate State

Add the ion-checkbox Ionic component to configure the checkbox in an Ionic 4 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. Create 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 => {
        item.isItemChecked = this.checkParent;
      });
    });
  }

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

    this.Checkboxes.map(item => {
      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 4/5 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.