Select all, deselect all in angular material.

2 thoughts on “Select all, deselect all in angular material.”

1. Can you provide same version of code in Angular 5
   I have HTML like this

   Select All
   {{p.name}}

   and component like this

   pro: any =[];

   constructor(private config: ConfigService) { }

   getProject() {
   this.config.getProject().subscribe(
   data => { this.pro = data[‘projects’]},
   err => console.error(err),
   () => console.log(‘done loading projects’)
   );
   }

   ngOnInit() {
   this.getProject();
   }

   Reply

   1. Hello Koushal,
      Here is your requested query hope it helps you.

      <ul *ngFor="let pro of pro"> <li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/></li> <li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="DisSelectAll();"/></li> <li> <input type="checkbox" [selected]="pro.select" [value]="pro.name" /></li> </ul> /* let assume pro JSON have 2 entities public tempPro = { 'name' : '', 'description' : '' } */ getProject() { this.config.getProject().subscribe( data => { getProjectResponse(data)}, err => console.error(err), () => console.log(‘done loading projects’) ); } getProjectResponse = function(data) { //we create our new JSON by adding selete entity on it and providing data of Response to it for (let i: 0; i<data.length; i++) { this.tempPro[i].name = data[i].name; this.tempPro[i].description = data[i].description; this.tempPro[i].select = false; } this.pro = this.tempPro; } selectAll = function() { for (var i = 0; i < this.names.length; i++) { this.pro[i].select = true; } } DisSelectAll = function() { for (var i = 0; i < this.names.length; i++) { this.pro[i].select = false; } }

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

      <ul *ngFor="let pro of pro">   <li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/></li>   <li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="DisSelectAll();"/></li>   <li> <input type="checkbox" [selected]="pro.select" [value]="pro.name" /></li> </ul>          /* let assume pro JSON have 2 entities     public tempPro = {   'name' :  '',   'description' : '' } */                       getProject() { this.config.getProject().subscribe( data => { getProjectResponse(data)}, err => console.error(err), () => console.log(‘done loading projects’) ); }   getProjectResponse = function(data) { //we create our new JSON by adding selete entity on it and providing data of Response to it for (let i: 0; i<data.length; i++) {   this.tempPro[i].name = data[i].name;   this.tempPro[i].description = data[i].description;   this.tempPro[i].select = false; } this.pro = this.tempPro; }                       selectAll = function() { for (var i = 0; i < this.names.length; i++) {       this.pro[i].select = true;     } }   DisSelectAll = function() { for (var i = 0; i < this.names.length; i++) {       this.pro[i].select = false;     } }

      Reply