Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

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


Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post