How To Check All And Uncheck All Switch Checkboxes In Angular

This short post shows how to check and uncheck all of the switch checkboxes in Angular. We’ll employ angular check uncheck all boxes. You can see how to use Angular to check several switch checkboxes. We’ll utilise the angular switch checkbox example to uncheck every box.

Approach:

Step:1  Use the following command to start a new angular app:

ng new Demo

Step:2  Make use of the following command to install bootstrap:

npm install bootstrap

 the project’s style.css file, then edit it:

@import 'bootstrap/dist/css/bootstrap.css';

Step:3  Add this to app.component.html:

<div class="container">
  <div class="text-center mt-5  table-bordered">
    <table class="table table-bordered w-50 ">
      <thead>
        <tr>
          <th scope="col">
            <div class="form-check form-switch">
              <input class="form-check-input" [(ngModel)]="isMasterSel" name="list_name" (change)="checkUncheckAll()"
                type="checkbox" role="switch" id="flexSwitchCheckDefault">
            </div>
            <h5>Select All/Unselect All</h5>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of categoryList">
          <th>
            <div class="form-check form-switch">
              <input class="form-check-input" [(ngModel)]="item.isSelected" name="list_name" value="{{item.id}}"
                (change)="isAllSelected()" type="checkbox" role="switch" id="flexSwitchCheckDefault">
            </div>
            {{item.value}}
          </th>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Step:4  Add this to app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isMasterSel:boolean;
  categoryList:any;
  checkedCategoryList:any;
  constructor(){
    this.isMasterSel = false;

    this.categoryList = [
      {id:1, value:'PHP',isSelected:false},
      {id:2,value:'Laravel',isSelected:false},
      {id:3,value:'Angular',isSelected:true},
      {id:4,value:'React',isSelected:true},
      {id:5,value:'Vue',isSelected:true},
      {id:6,value:'JQuery',isSelected:false},
      {id:7,value:'Javascript',isSelected:false},
    ];

    this.getCheckedItemList();
}

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

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

Step:5  Add this to  app.module.ts:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms'


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

Output:-