How to Check All/ Uncheck All Checkbox List in Angular.IO Version 7

In this post, we will discuss a very common functionality on checkboxes, select and unselect all checkboxes in Angular applications. We will create a project in the latest Angular 7 version and create a dummy item list to demonstrate this.

Select/ Unselect Checkbox List Items in Angular 7

In the app.component.ts file, we will define an object of items using which we will create a list. This object will have an id, value and a boolean to check if the current item is selected or not.

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

Add Functions in Component

Now add some functions in the app.component.ts file

checkUncheckAll : This method will traverse items object and change boolean value of isSelected attribute. if we set isSelected to true checkbox will be checked same vice versa for false value

isAllSelected: This method will check if any of the items is checked using Javascript’s every function.
The every() method checks if all elements in an array pass a test (provided as a function).
getCheckedItemList: This method is getting selected or checked items and pushing in a new object checkedList
After adding functions above our component will look as below


HTML Checkbox List

In the app.component.html file, add following html code looping over list object checklist sing *ngFor

Don’t forget to import FormsModule in app.module.ts, as we are using ngModel.

app.module.ts will look like this.



So here we implemented Select Un select checkbox list in Angular which will look as shown in the image above. You can check the working demo here.

Leave a Reply

Your email address will not be published. Required fields are marked *