Sunday, April 9, 2017

Select all/ deselect all checkbox - Angular 2

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 below post as well.

1. Select all/ deselect all check box using Angular js 1
2. Select all/ deselect all check box using Jquery

Select all/deselect all checkbox using angular 2

Please check below code to see the component code. Here I have used angular 2 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 js 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 { }

Related Post

1. Date filtering and formatting using pipe in Angular 2

2. Simple search using pipe in angular 2

3. Angular 2 toggle button | Angular 2 collapsible panel

3 comments :

  1. Hi,
    This is a useful post. Can you please suggest a solution to handle this type of multiple cases. I have created a plunker by referring your code.

    https://plnkr.co/edit/yPaYtqFNGxI9SHiB3aZk?p=preview

    ReplyDelete
  2. I need to handle this in the following scenario:

    I have different categories and inside each category, there are different notifications.
    Categories and notifications have checkboxes. When a category is checked, notifications in this category should also be checked. When I uncheck a category, notifications in this category should also be unchecked. If all the notifications in a particular category are checked and I uncheck a notification, then that category checkbox should be unchecked. If all the notifications in a category is checked, then the corresponding category checkbox should be checked.

    Now I am facing issue when i uncheck a notification, the corresponding category checkbox is not reflecting. Can you please help.

    ReplyDelete