Sunday 9 April 2017

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

9 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
    Replies
    1. Hi Joseph,
      Are you able to find a solution for this scenario??

      Delete
  3. Worked for me. Thanks.

    ReplyDelete
  4. How to delete selected data from table in angular 2? Help!!

    ReplyDelete
  5. Can you please provide the same example for bootstrap tables using reactive forms?

    ReplyDelete
  6. Very helpful Sir, Thank you so much

    ReplyDelete
  7. hiii if we create multiple checkboxes through ngFor loop and now if we have to show data on check box selection how we do

    ReplyDelete