Ionic 4 | How to Select All/ Unselect All Checkboxes with Indeterminate in Ionic 4

Ionic team release the latest version Ionic 4.1 Hydrogen, in which they have introduced Checkbox Indeterminate state. Indeterminate state is mostly used in Master checkbox which indicates the child checkbox list.

Indeterminate checkbox state indicates that not all but some of the checkboxes are checked.

Let’s create a demo app with Check/ Uncheck All item list

On the master check, we will add indeterminate property which takes a boolean value. Also, there will be a click event and ngModel. In Child list checkbox we will have a ionChange event. Child item with checkboxes will iterate using *ngFor

Add methods and dummy list checkBoxList in ts file. The checkMaster method will check/uncheck list items by iterating using forEach. The checkEvent will be available on every child list checkbox to calculate total checked items to handle the state of master checkbox.

So using the above method we can easily create a nice check/uncheck all list in Ionic using new Indeterminate state.

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Alexey Recent comment authors
newest oldest most voted
Notify of

I try to repeat but have error: Unhandled Promise rejection: Template parse errors: Can’t bind to ‘indeterminate’ since it isn’t a known property of ‘ion-checkbox’. 1. If ‘ion-checkbox’ is an Angular component and it has ‘indeterminate’ input, then verify that it is part of this module. 2. If ‘ion-checkbox’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. 3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. (“ = !; $event.stopPropagation()”> ][indeterminate] = “true” > My Ionic info: Ionic: ionic (Ionic CLI) : 4.12.0 Ionic Framework : ionic-angular… Read more »