select all checkboxes in angular 2?

Question

I have to select all checkboxes if user select 'All Neighbourhoods' checkbox in angular. I tried with below code. But not working. How to fix this in angular 2?

explore-list.Component.html

    <div class="checkbox_cont">
        <div class="checkbox ">
            <!--<input id="modal_checkbox1" type="checkbox" name="categories" unchecked="">-->
            <input type="checkbox" name="allneighbourhoods"  [value]="allneighbourhoods" (change)="neighbourhoodname [$event.target.getAttribute('value')]=$event.target.checked" id="allneighbourhoods" ng-click="toggleSelect($event)" />
            <label for="allneighbourhoods">All Neighbourhoods</label>
        </div>
    </div>
    <div class="modal_line"></div>                                                  
    <div class="checkbox " *ngFor="let neighbourhood of neighbourhoods;let i=index;">
        <input type="checkbox" name="neighbourhoodname[{{i}}]"  [value]="neighbourhood" (change)="neighbourhoodname [$event.target.getAttribute('value')]=$event.target.checked" id="{{neighbourhood}}"  [checked]='true' />
        <label for="{{neighbourhood}}">{{neighbourhood}}</label>
    </div>

explore-list.Component.ts

    export class ExploreListComponent implements OnInit {  
        neighbourhoodname={};

        toggleSelect = function(event){       
            this.forEach(this.checkboxes, function(item){
                console.log(item);
                item.selected = event.target.checked;
            });
        }
    }

neighbourhoods json

Seems like duplicate http://stackoverflow.com/questions/36059701/select-all-checkboxes-with-angular-js — Ria Sen, Apr 03 '17 at 07:25
you can refere to this [**solution**](http://stackoverflow.com/questions/43132485/ionic-2-how-to-check-all-checkboxes-on-button-click-and-get-checked-checkboxes/43132696#43132696) — Aravind, Apr 03 '17 at 08:06

Sravan · Accepted Answer · 2017-04-03T13:31:37.513

7

You can add ngModel to the check boxes,

[(ngModel)]="neighbourhood.selected"

<form #f="ngForm" novalidate>
   <div class="checkbox_cont">
       <div class="checkbox ">
           <input type="checkbox" id="allneighbourhoods" name="allneighbourhoods"  value="allneighbourhoods" (click)="toggleSelect($event)" />
           <label for="allneighbourhoods">All Neighbourhoods</label>
       </div>
   </div>
   <div class="modal_line"></div> 
     <div class="checkbox " *ngFor="let neighbourhood of neighbourhoods;let i=index;">
      <input type="checkbox" name="neighbourhoodname[{{i}}]"  [checked]="neighbourhood.selected" value="neighbourhood.selected" id="{{neighbourhood.name}}" (change)="neighbourhood.selected = !(neighbourhood.selected)"/>
      <label for="{{neighbourhood.name}}">{{neighbourhood.name}}</label>
   </div>
   <input type="button" (click)="ApplyFilters(f.valid)"  class="btn btn-primary filters_btn" value="Apply Filters">
</form>

Now, your function will be same,

export class ExploreListComponent implements OnInit {  

 neighbourhoods = [{"name":"Taito"},{"name":"Shinjuku"},{"name":"Shibuya"}];

 toggleSelect = function(event){  

        this.allneighbourhoods = event.target.checked;
        this.neighbourhoods.forEach(function(item){
         console.log(item);
         item.selected = event.target.checked;
      });

  }       

  ApplyFilters(isValid: boolean) {      
    var datas  = this.neighbourhoods.filter(function (data) { return data.selected == true });
  console.log(datas);
    if (!isValid) return;         

 }
}

I have added a selected property, so that the selected value of main checkbox will be the model value of all checkboxes.

Here is a Working DEMO

edited Apr 03 '17 at 13:31

answered Apr 03 '17 at 07:26

Sravan

18,467
3
30
54

I getting this error. class ExploreListComponent - inline template:100:15 caused by: this.forEach is not a function – Vel Apr 03 '17 at 07:31
the checkboxes neighbourhoods are dynamic. – Vel Apr 03 '17 at 07:32
Still im getting error. class ExploreListComponent - inline template:100:15 caused by: Cannot read property 'forEach' of undefined – Vel Apr 03 '17 at 07:35
. in this script `neighbourhoods` are dynamic. – Vel Apr 03 '17 at 07:36
you donot have `neighbourhoods` on your component?, check the DEMO I added, you will get an Idea – Sravan Apr 03 '17 at 07:39
Im getting this error class ExploreListComponent - inline template:99:15 caused by: Cannot create property 'selected' on string 'West' – Vel Apr 03 '17 at 08:02
`item` varirable return `West`, `Central`, `North`, `East` in console. – Vel Apr 03 '17 at 08:07
I cannot get all the values in `neighbourhoodname` on submit button click. – Vel Apr 03 '17 at 09:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139742/discussion-between-sravan-and-vel). – Sravan Apr 03 '17 at 09:44
http://stackoverflow.com/questions/43044422/listview-to-details-view-without-calling-api-again – Vel Apr 04 '17 at 05:33

select all checkboxes in angular 2?

1 Answers1