Geek Answers Handbook

Angular 2 checkbox check all

I have a list for checking project names. At the bottom, I want to check the box to check or uncheck all of them. I think I need * ngIf (if checked) with a * ngFor loop (check everything), but this is a pretty difficult task ... I cannot figure out how I should handle this. I use (checked) or something or * ngIf = "(checked)" and then use the * ngFor loop to set project.isChecked. I can not get into the logic of this.

<div id="drp-project-select"> <div class="scroller" [hidden]="!showMenu"> <div id="search-wrapper"> <i class="fa fa-search fa-xs"></i> <input [(ngModel)]="searchTerm" type="text" placeholder="Zoek op naam..." #search> </div> <ul> <li *ngFor="#project of projectdata.LoginResponse?.ProjectVM | searchpipe:'Project':search.value"> <label class="checkbox-label" > <input type="checkbox" class="dropdown-checkbox" [(ngModel)]="project.isChecked" (change)="addProject(project)" > <span>{{project.Project}}</span> </label> </li> </ul> </div> <div class="bottom-data" [hidden]="!showMenu"> <label><input type="checkbox" id="bottom-checkbox"></label> </div> </div>
+6
source share
1 answer

I would use the check / uncheck all checkbox control to receive notifications when the user checks or cancels:

 <input type="checkbox" [ngFormControl]="allCtrl"/>

allCtrl initialized inside the component constructor. You can then register with the valueChanges property of this control to receive update notifications and update the isChecked fields accordingly:

 constructor() { this.allCtrl = new Control(); this.allCtrl.valueChanges.subscribe( (val) => { this.projectdata.LoginResponse.ProjectVM.forEach((project) => { project.isChecked = val; }); }); }
+4
source

More articles:


All Articles