Sunday, 9 April 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

No comments :

Post a Comment