checkbox to select all checkbox angular

Solutions on MaxInterview for checkbox to select all checkbox angular by the best coders in the world

showing results for - "checkbox to select all checkbox angular"
Sofiane
28 Sep 2019
1<div style="text-align:center">
2  <h1>
3    {{ title }}!
4  </h1>
5</div>
6<div class="container">
7  <div class="text-center mt-5">
8    <div class="row">
9        <div class="col-md-6">
10            <ul class="list-group">
11                <li class="list-group-item">
12                  <input type="checkbox" [(ngModel)]="masterSelected" name="list_name" value="m1" (change)="checkUncheckAll()"/> <strong>Select/ Unselect All</strong>
13                </li>
14              </ul>
15              <ul class="list-group">
16                <li class="list-group-item" *ngFor="let item of checklist">
17                  <input type="checkbox" [(ngModel)]="item.isSelected" name="list_name" value="{{item.id}}" (change)="isAllSelected()"/>
18                  {{item.value}}
19                </li>
20              </ul>
21        </div>
22        <div class="col-md-6">
23            <code>{{checkedList}}</code>
24        </div>
25    </div>
26  </div>
27</div>Copy
Lya
16 Feb 2018
1import { Component } from '@angular/core';
2
3@Component({
4  selector: 'app-root',
5  templateUrl: './app.component.html',
6  styleUrls: ['./app.component.scss']
7})
8export class AppComponent {
9  title = 'Angular 7 CheckBox Select/ Unselect All';
10  masterSelected:boolean;
11  checklist:any;
12  checkedList:any;
13
14  constructor(){
15      this.masterSelected = false;
16      this.checklist = [
17        {id:1,value:'Elenor Anderson',isSelected:false},
18        {id:2,value:'Caden Kunze',isSelected:true},
19        {id:3,value:'Ms. Hortense Zulauf',isSelected:true},
20        {id:4,value:'Grady Reichert',isSelected:false},
21        {id:5,value:'Dejon Olson',isSelected:false},
22        {id:6,value:'Jamir Pfannerstill',isSelected:false},
23        {id:7,value:'Aracely Renner DVM',isSelected:false},
24        {id:8,value:'Genoveva Luettgen',isSelected:false}
25      ];
26      this.getCheckedItemList();
27  }
28
29  checkUncheckAll() {
30    for (var i = 0; i < this.checklist.length; i++) {
31      this.checklist[i].isSelected = this.masterSelected;
32    }
33    this.getCheckedItemList();
34  }
35  isAllSelected() {
36    this.masterSelected = this.checklist.every(function(item:any) {
37        return item.isSelected == true;
38      })
39    this.getCheckedItemList();
40  }
41
42  getCheckedItemList(){
43    this.checkedList = [];
44    for (var i = 0; i < this.checklist.length; i++) {
45      if(this.checklist[i].isSelected)
46      this.checkedList.push(this.checklist[i]);
47    }
48    this.checkedList = JSON.stringify(this.checkedList);
49  }
50
51}
52Copy
Wilhelm
02 Aug 2017
1Prepared a small demo to show how this can be done using ngModel directive. Link: https://stackblitz.com/edit/angular-lxjrdh
2
3It uses Array.every to check if all are checked or not. If checked, it resets all otherwise checks all.
queries leading to this page
checkbox true false angularget all checkboxes in angularselect all checkbox angular githubangular 8 select all checkboxselect all 2fdeselect all checkbox using angular 8selectall checkbox in angular 8how to add checkbox to select all in angularhow to implement select all checkbox in angularselect input with checkboxes in angular tsselect all checkbox angular materialselect all checkbox angularjsangular get all selected checkboxesselect all checkbox when one checkbox is checked in angularangular table checkbox select allcheckbox to select all checkbox in angular validatebutton to select all checkbox angularjsangular checkbox check allselect only one checkbox in angularhow to check all checkboxes in angularhow to set all checkbox checked in angularhow to select all checkbox in angularangular check all checkboxeshow to make a select all checkbox in angularangular select all checkboxcheckbox all checked angularangular table select all checkboxhow do list checkbox angularcheck all checkboxes angularhow to make all checkboxes true in angularselect checkbox only on select checkbox angularget all checkbox angularjsselect all checkbox in angularselect all checkbox formarray angularselect all checkbox angularangular checkbox select allselect all checkbox in angular 6get all checkboxes in div angularhow to select all values in checkbox in angular6unselect all checkbox in angularhow print the checkbox selected item angularjsselect all checkbox in anggularhow to select all values in checkbox in angularselect all checkbox in one check in angularangularjs select all checkboxcheckbox to select all checkbox in angularangular find checkbox in divhow to select all the dropdown checkbox list in angularhow to select only one checkbox in checkboxlist angularjscheckbox select all angular jscheck all checkboxes through one in angularselect all checkbox from taab 3be angularselect all checkbox in angular materialcheckbox select all in ng selectcheckbox select all angularangular 6 select all checkboxangular checkbox list select allall checkbox checked angular formcheck all checkbox is selected in angular 7checkbox to select all checkbox angularangular 7 select all checkboxselect all checkbox checked in angularcheck all checkbox angularjscheckbox to select all checkbox angular