Angular 9|8|7 How to Check All/ Uncheck All Checkbox List

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 9 version and create a dummy item list to demonstrate this.

This tutorial is updated and compatible with all Angular versions including 6,7,8 and 9

Select/ Unselect Checkbox List Items in Angular 9

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

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Angular 7 CheckBox Select/ Unselect All';
  masterSelected:boolean;
  checklist:any;
  checkedList:any;

  constructor(){
      this.masterSelected = false;
      this.checklist = [
        {id:1,value:'Elenor Anderson',isSelected:false},
        {id:2,value:'Caden Kunze',isSelected:true},
        {id:3,value:'Ms. Hortense Zulauf',isSelected:true},
        {id:4,value:'Grady Reichert',isSelected:false},
        {id:5,value:'Dejon Olson',isSelected:false},
        {id:6,value:'Jamir Pfannerstill',isSelected:false},
        {id:7,value:'Aracely Renner DVM',isSelected:false},
        {id:8,value:'Genoveva Luettgen',isSelected:false}
      ];
  }

}

Add Functions in Component

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

  checkUncheckAll() {
    for (var i = 0; i < this.checklist.length; i++) {
      this.checklist[i].isSelected = this.masterSelected;
    }
    this.getCheckedItemList();
  }
checkUncheckAll() : This method will traverse items object and change the boolean value of isSelected attribute. if we set isSelected to true checkbox will be checked same vice versa for false value
  isAllSelected() {
    this.masterSelected = this.checklist.every(function(item:any) {
        return item.isSelected == true;
      })
    this.getCheckedItemList();
  }
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.checkedList = [];
    for (var i = 0; i < this.checklist.length; i++) {
      if(this.checklist[i].isSelected)
      this.checkedList.push(this.checklist[i]);
    }
    this.checkedList = JSON.stringify(this.checkedList);
  }
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
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Angular 7 CheckBox Select/ Unselect All';
  masterSelected:boolean;
  checklist:any;
  checkedList:any;

  constructor(){
      this.masterSelected = false;
      this.checklist = [
        {id:1,value:'Elenor Anderson',isSelected:false},
        {id:2,value:'Caden Kunze',isSelected:true},
        {id:3,value:'Ms. Hortense Zulauf',isSelected:true},
        {id:4,value:'Grady Reichert',isSelected:false},
        {id:5,value:'Dejon Olson',isSelected:false},
        {id:6,value:'Jamir Pfannerstill',isSelected:false},
        {id:7,value:'Aracely Renner DVM',isSelected:false},
        {id:8,value:'Genoveva Luettgen',isSelected:false}
      ];
      this.getCheckedItemList();
  }

  checkUncheckAll() {
    for (var i = 0; i < this.checklist.length; i++) {
      this.checklist[i].isSelected = this.masterSelected;
    }
    this.getCheckedItemList();
  }
  isAllSelected() {
    this.masterSelected = this.checklist.every(function(item:any) {
        return item.isSelected == true;
      })
    this.getCheckedItemList();
  }

  getCheckedItemList(){
    this.checkedList = [];
    for (var i = 0; i < this.checklist.length; i++) {
      if(this.checklist[i].isSelected)
      this.checkedList.push(this.checklist[i]);
    }
    this.checkedList = JSON.stringify(this.checkedList);
  }

}

 

HTML Checkbox List

In the app.component.html file, add following HTML code looping over list object checklist sing *ngFor
<div style="text-align:center">
  <h1>
    {{ title }}!
  </h1>
</div>
<div class="container">
  <div class="text-center mt-5">
    <div class="row">
        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item">
                  <input type="checkbox" [(ngModel)]="masterSelected" name="list_name" value="m1" (change)="checkUncheckAll()"/> <strong>Select/ Unselect All</strong>
                </li>
              </ul>
              <ul class="list-group">
                <li class="list-group-item" *ngFor="let item of checklist">
                  <input type="checkbox" [(ngModel)]="item.isSelected" name="list_name" value="{{item.id}}" (change)="isAllSelected()"/>
                  {{item.value}}
                </li>
              </ul>
        </div>
        <div class="col-md-6">
            <code>{{checkedList}}</code>
        </div>
    </div>
  </div>
</div>

Don't forget to import the FormsModule in app.module.ts, as we are using [(ngModel)] directive for two way binding.

The app.module.ts file will look like this.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

That's it now run the application by hitting $ ng serve --open to see it working.

Angular 9|8|7 How to Check All/ Uncheck All Checkbox List

 

 

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

Subscribe
Notify of
guest
5 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
elc

Thanks a lot.

elc

Thanks a lot.

Kirongo

Hi, this is so good to me ,Thanks

Raymundo

Thank you so much! Glad I’m found this great solution! You rock!

Pallavi Desai

Great blog and works perfectly