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.

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

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

Great blog and works perfectly