MultiCheckBoxExample in Angular Framework

MultiCheckBoxExample in Angular Framework:-

Create Component using checkboxexample
ng g c checkboxexample

CheckBoxExample.ts

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

@Component({
  selector: 'app-checkboxexample',
  templateUrl: './checkboxexample.component.html',
  styleUrls: ['./checkboxexample.component.css']
})
export class CheckboxexampleComponent implements OnInit {
  masterSelected:boolean;
  checklist:any;
  checkedList:any;
  constructor() {
    this.masterSelected = false;
    this.checklist = [
        {id:1,value:'C',isSelected:false},
        {id:2,value:'CPP',isSelected:true},
        {id:3,value:'DS',isSelected:true},
        {id:4,value:'JAVA',isSelected:false},
        {id:5,value:'PHP',isSelected:false},
        {id:6,value:'ANGULAR',isSelected:false},
        {id:7,value:'NODE',isSelected:false},
        {id:8,value:'ROR',isSelected:false}
      ];
   }
    checkUncheckAll() {
    for (var i = 0; i < this.checklist.length; i++) {
      this.checklist[i].isSelected = this.masterSelected;
    }
    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);
  }
   isAllSelected() {
    this.masterSelected = this.checklist.every(function(item:any) {
        return item.isSelected == true;
      })
    this.getCheckedItemList();
  }
  ngOnInit() {
  }

}

Manage Design File:-

 <ul>

                <li >

                  <input type="checkbox" [(ngModel)]="masterSelected" name="list_name" value="m1" (change)="checkUncheckAll()"/> <strong>Select/ Unselect All</strong>

                </li>

              </ul>

              <ul >

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

              {{checkedList}}