Ionic 6 Indeterminate Checkboxes Tutorial with Example

Ionic Angular indeterminate state tutorial; Throughout this step-by-step example, you will ascertain how to select and unselect all checkboxes in the Ionic application.

Furthermore, we will also look at how to effortlessly and profoundly set the indeterminate state of checkboxes using the indeterminate property.

The checkbox is the essential UI component that lets you select one or many options from the given list of options. Ideally, it is a tiny square box; it usually has checked, unchecked and disabled state.

However, if you have a parent checkbox with child checkbox elements, then in this condition, it has one more state, which is mainly called an Indeterminate state.

In simple term Indeterminate checkbox refers to fewer checkboxes are checked from the entire checkbox list.

Create Ionic App

First, invoke the installation of Ionic CLI on your system:

npm install -g ionic

Then, type command and begin installing Ionic angular application:

ionic start demo-app blank --type=angular

Ultimately, head over to project folder:

cd demo-app

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Enable Indeterminate State – Check/Uncheck All Checkboxes

You can select and unselect all checkboxes item at once by adding or activating an indeterminate state in the ion-checkbox directive.

Create a checkbox object, which holds multiple values to iterate and display in the primary checkbox list as child checkbox elements.

Define the onChange() method; its main work is to add a few features. Such as select one checkbox in the given checkbox list, select all the checkboxes items and unselect all the checkbox items at once.

Update home.page.ts file:

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

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

export class HomePage {
  setIndeterminateState: boolean;
  parentCheckbox: boolean;
  CbList;

  constructor() {
    this.CbList = [
      {
        value: "See You Again",
        selected: false
      }, {
        value: "Uptown Funk",
        selected: false
      }, {
        value: "Blank Space",
        selected: false
      }, {
        value: "Shake It Off",
        selected: false
      }, {
        value: "Lean On",
        selected: false
      }
    ];
  }

  onSelect() {
    setTimeout(() => {
      this.CbList.forEach(item => {
        item.selected = this.parentCheckbox;
      });
    });
  }

  onChange() {
    const checkboxes = this.CbList.length;
    let selected = 0;

    this.CbList.map(el => {
      if (el.selected) selected++;
    });

    if (selected > 0 && selected < checkboxes) {
      this.setIndeterminateState = true;
      this.parentCheckbox = false;
    } else if (selected == checkboxes) {
      this.parentCheckbox = true;
      this.setIndeterminateState = false;
    } else {
      this.setIndeterminateState = false;
      this.parentCheckbox = false;
    }
  }

}

Define the indeterminate property on the main or parent checkbox, and it works on the boolean pattern, also take the help of ngModel and click event to fire the onChange() function.

To display checkbox elements, use ngFor directive; likewise, the ionChange event will trigger the onChange() method.

Update home.page.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Indeterminate Checkbox
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-list>
    <ion-item>
      <ion-label><strong>Select All</strong></ion-label>
      <ion-checkbox 
        slot="start" 
        [indeterminate]="setIndeterminateState"
        [(ngModel)]="parentCheckbox"
        (click)="onSelect($event)">
    </ion-checkbox>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item *ngFor="let item of CbList">
      <ion-label>{{item.value}}</ion-label>
      <ion-checkbox slot="start" [(ngModel)]="item.selected" (ionChange)="onChange()">
      </ion-checkbox>
    </ion-item>
  </ion-list>

</ion-content>

Start Ionic Application

For testing the app on the browser, you may use the ionic lab package.

You can install the lab package using the npm command.

npm i @ionic/lab --save-dev

Eventually, start the app:

ionic serve -l

Indeterminate Checkboxes in Ionic

Conclusion

So this was it; as far as I think from now on, you will surely be able to understand how to work with the indeterminate state in the ionic app.

We had a chance to look at how to create a simple feature in conjunction with selecting and unselecting all checkbox items to display an indeterminate checkbox state in ionic.