How to select all checkbox in angular 2?

Question

<div class="col-2">
  <label class="myButton btn btn-default"><input  type="checkbox" [checked]="selectAllCheckbox" (click)="selectAll()"> Select All</label>
</div>
<div class="row">
  <div class="col-2" *ngFor="let user of Users; let idx = index">
    <label><input [checked]="item._selected" (click)="updatedUserList(user, $event)" type="checkbox"> {{user}}</label>
  </div>
</div>

users = ["users1", "users2", "users3"]

Rahul Cv · Accepted Answer · 2017-07-06 07:37:21Z

9

Its a workaround in angular 2 you canrefer below code 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>

Component

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

answered Jul 6, 2017 at 7:37

Rahul Cv

7255 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhishek Gautam Over a year ago

This approach won't work when the data is coming from API request.

user10328376 · Accepted Answer · 2018-09-07 02:46:23Z

0

In your html

   <div *ngFor="let user of Users">
      <input type="checkbox" [(ngModel)]="user.selected" (change)="ToggleChb();">
   </div>

In typescript Component

   ToggleChb(state:boolean){
     this.Users.forEach(user=> user.selected = state)
   }

answered Sep 7, 2018 at 2:46

user10328376

Collectives™ on Stack Overflow

How to select all checkbox in angular 2?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related