Angular Material 8/7 | Check/ Uncheck Checkbox List with Indeterminate state using MatCheckboxModule

Checking/ Unchecking a list of items with checkboxes is provided with a master checkbox to provide ease to users to control all list items. Angular Material Checkbox module MatCheckbox proves very handy in creating such lists with a number of properties.

In Material Checkbox module there are three states with Checked and Unchecked which are common, but there is also a third state called Indeterminate which is a middle of these two. Indeterminate Checkbox state indicates that some of the list items are checked but not all. It is indicated with a hyphen (-) in the checkbox.

Here we will create a list of items with a master checkbox using which a user can check to uncheck all item lists. Also if a user checks some of the items but not all, the master checkbox will show Indeterminate state which is very easy to implement.


Let’s get started!

First, make sure you have installed the latest version of Angular CLI & Core. We are going to create a new Angular project in latest version v8.0.6

Also, update NodeJS version 12+. Check your version of NodeJs by running $ node --version

Create a new Angular Application

Run following npm command to create a new project using ng CLI

 

Install Angular Material v8

As we are creating a v8 Angular project, so we need the same version for Angular Material. Run following NPM command to install Angular Material and it’s dependencies

 

Configure Material Animations

Next, open app.module.ts file to import BrowserAnimationsModule then add it in imports array to enable animation for Material components.

Add Material Theme

To add a theme of Material in the project, open styles.css file then import one of the theme file used to style Material components.

We are done with Angular material installation and configurations.

Add Checkbox and Other Modules

To use a Material component we need to import it into the app’s module. Here for our Checkbox list, we will import some required modules.

MatCheckboxModule : Checkbox component module <mat-checkbox>
MatListModule : List item componet module <mat-list>
MatCardModule : Card module, will wrap Checklist in a card <mat-card>
FormsModule : For Form controls like checkbox we use [(ngModel)] which needs FormsModule
Now open the app.module.ts file, then import above modules then add in imports array as shown below:

Add Checkbox List in App Template

In the app.component.html file add following template HTML
Here we have wrapped a list of checkboxes with a master checkbox component. This list is wrapped in a card component

<mat -list-item> with <mat-checkbox> is iterating over items in checkbox_list object using *ngFor Angular directive

Let’s discuss some of the important properties of <mat-checkbox>
[disabled] : Boolean value to set state enable/disabled.
[checked]: Boolean value to change checked state of a checkbox.
[indeterminate]: Boolean value, when set to true it will show Indeterminate state with hyphen like checked sign.
[labelPosition] : Label text around checkbox can be set to ‘after‘ or ‘before
We have used Indeterminate state for a master check as its main significance is for main parent checkboxes for a list.

Define Checklist Object and Methods in Component Class

For checkbox list we have defines an object with a set of keys of each checkbox with name, checked, disabled, labelPosition values.

 

(change) event listener on Master and checkbox list checkboxes are having logic to change the state.
master_change() method on master checkbox is traversing over list items to check/ uncheck all items by checking its model state

list_change() method on each checkbox change event is checking the following three conditions:
If some checkboxes are checked but not all; then set Indeterminate state of the master to true.
If checked count is equal to total items; then check the master checkbox and also set Indeterminate state to false.
If none of the checkboxes in the list is checked then uncheck master also set Indeterminate to false.

The complete component class (app.component.ts) will look like this

Conclusion: Indeterminate state adds a good user experience to checkbox list which indicates the overall state of checked items. Angular material components are very easy to implement and use with a number of optional parameters available.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of