Select all/ deselect all checkbox - Angular

AngularCheckboxSelect AllDeselect All

Here I am going to discuss about implementing a select all/deselect all checkbox using Angular 2+. I have explained the same using Angular js 1 and Jquery. If you want to compare the implementation please check those as well.

Select all/deselect all checkbox using angular

---

Check below component code, here I have used angular loop concept to loop the value in UI.

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;
  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 },
    ]
  }
}

Html

<ul>
    <li> <input type="checkbox"/></li>
    <li *ngFor="let n of names"> <input type="checkbox"/>{{n.name}}</li>
  </ul>

Above Html code is to show the value in UI. Now we need to implement a logic to to select all and also to deselect all check box on click of master checkbox. And additionally if user has selected all child checkbox then master checkbox should be selected automatically and vice versa. We can achieve this by using a simple code. Check below updated component.

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

And below is our updated html code. You may notice a difference in click/change method between angular 1 and 2. I have explained the same here ng-click in angular 2

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>

We are done. Click to the master checkbox and see the result. If you are an Angular 1 expert, it is very easy to convert those logic into Angular 2.

If you are getting any error like "Can't bind to 'ngModel' since it isn't a known property of 'input". Please import form module. For using two way binding for form inputs you need to import form module.

import { FormsModule } from '@angular/forms';

I will share the module code as well to avoid any confusion.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In this article we have discussed about implementing a select all/deselect all checkbox using Angular 2(+) concept.

Angular 4CheckboxSelect AllDeselect All

Related Post

1. Date filtering and formatting using pipe in Angular

2. Simple search using pipe in angular

3. Angular 2 toggle button | Angular collapsible panel