Hello Devs,

In this tutorial, we are going to see example of check all and uncheck all checkbox in angular 10.

Given below is the example of check all uncheck all checkbox angular 10.

Follow this step by step guide given below:




Step 1: 

 

Create New App

ng new ngCheckedAll



Step 2: 


Import FormsModule src/app/app.module.ts

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

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

import { FormsModule } from '@angular/forms';

  

import { AppComponent } from './app.component';

  

@NgModule({

  imports:      [ BrowserModule, FormsModule ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }



Step 3:


Update Component ts File src/app/app.component.ts

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

  

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular';

  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 4: 


Update HTML File src/app/app.component.html

<h1>Check UnCheck All Checkbox Angular - Rathorji.in</h1>

<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)]="isMasterSel" name="list_name" value="h1" (change)="checkUncheckAll()"/>  <strong>Select All / Unselect All</strong>

                </li>

              </ul>

              <ul class="list-group">

                <li class="list-group-item" *ngFor="let item of categoryList">

                  <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>{{checkedCategoryList}}</code>

        </div>

    </div>

  </div>

</div>


Run this command: 

ng serve


I hope this example helps you.