How to select all the checkboxes in angular 6?

Question

My Typescript code is given below.

 selectedAll: any;
 selectedAllSecondname: any;

 this.name = [ {name: 'as', value: 'as', selected: false },
                {name: 'bs', value: 'bs', selected: false },
                {name: 'cs', value: 'cs', selected: false } ];
 this.Secondname = [ {name: 'dd', value: 'dd', selected: false },
                {name: 'ee', value: 'ee', selected: false },
                {name: 'ff', value: 'ff', selected: false } ];
 this.Thirdname = [ {name: 'gg', value: 'gg', selected: false },
                {name: 'hh', value: 'hh', selected: false },
                {name: 'ii', value: 'ii', selected: false } ];

  selectAll(){
    for(var i=0; i < this.name.length; i++) {
       for(var j=0; j < this.Secondname.length; j++) {
          this.name[i].selected = this.selectedAll;
          this.Secondname[j].selected = this.selectedAllSecondname;
       }
     }
  }

 checkIfAllSelected(){

    this.selectedAll = this.names.every(function (item: any) {
       this.checkIfAllSecondnameSelected();
       return item.selected == true;
    })
   }

So I have the same functions with different names for every list which I have declared over up.

 My html:

  <li><input type="checkbox" [(ngModel)] = "selectedAll" (change) = "selectAll();">Select All </li>
  <li *ngFor = "let a of name">
      <input type="checkbox" [(ngModel)]="a.selected" (change)="checkIfAllSelected()">
     {{ a.name }}
   <li>

 <li><input type="checkbox" [(ngModel)] = "selectedAll" (change) = "selectAllSecondname();">Select All </li>
  <li *ngFor = "let d of Secondname">
      <input type="checkbox" [(ngModel)]="d.selected" (change)="checkIfAllSecondnameSelected()">
     {{ d.name }}
   <li>

So here what Im trying to do is, if I click on select all, I need to check every other checkboxes in the page. But it checking only the names not Second names & third names.

Can anybody please tell me where Im going wrong & how to correct that?

Solution

You can use the below example

HTML

<ul>
  <li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/>
  </li>
  <li *ngFor="let n of names"> 
  <input type="checkbox" [(ngModel)]="n.selected" (change)="checkIfAllSelected();">
  {{n.name}}
  </li>
</ul>

TS

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title: String;
  names: any;
  selectedAll: any;
  constructor() {
    this.title = "Select all/Deselect all checkbox - Angular 2";
    this.names = [
      { name: 'Prashobh', selected: false },
      { name: 'Abraham', selected: false },
      { name: 'Anil', selected: false },
      { name: 'Sam', selected: false },
      { name: 'Natasha', selected: false },
      { name: 'Marry', selected: false },
      { name: 'Zian', selected: false },
      { name: 'karan', selected: false },
    ]

  }
  selectAll() {
    for (var i = 0; i < this.names.length; i++) {
      this.names[i].selected = this.selectedAll;
    }
  }
  checkIfAllSelected() {
    this.selectedAll = this.names.every(function(item:any) {
        return item.selected == true;
      })
  }
}

Comments

[Priyanka]

Thanks @Sujeith Gopi Nath But my problem here is I need to check all other checkboxes in Second NAmes & Third names also.

[Sujeith Gopi Nath]

Just use the selectAll function to iterate over other names as well, selectAll(names) { for (var i = 0; i < names.length; i++) { names[i].selected = this.selectedAll; } }