Hi i have a array of objects with id and value, i am binding to html using reactive forms, when i click on select and deselect all, i dont get any errors nor get the required output. I am not getting where my issue is.
HTML:
<div class="col">
<div class="row row-cols-3" formGroupName="Print">
<div class="col" *ngFor="let print of PrintList;let i = index">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="{{print .id}}">
<label class="custom-control-label" for="{{print.id}}">{{print.value}}</label>
</div>
</div>
<div class="col">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="SelectDeselectAll" [checked]="isAllChecked()"
(change)="checkAll($event)">
<label class="custom-control-label" for="SelectDeselectAll">Select/Deselect All</label>
</div>
</div>
</div>
</div>
Ts:
checkAll(ev) {
this.PrintList.forEach(x => x.id = ev.target.checked)
}
isAllChecked() {
return this.PrintList && this.PrintList.every(_ => _.id);
}
PrintList = [{ id: 1, value: "flowers" }, { id: 2, value: "fruits" }, { id: 1, value: "cars" }, { id: 1, value: "bikes" },]
Try doing this :
HTML :
<div class="col">
<div class="row row-cols-3" >
<div class="col" *ngFor="let print of PrintList;let i = index">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="{{print .id}}" [checked]="print.checked">
<label class="custom-control-label" for="{{print.id}}">{{print.value}}</label>
</div>
</div>
<div class="col">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="SelectDeselectAll" [checked]="all"
(change)="checkAll($event)">
<label class="custom-control-label" for="SelectDeselectAll">Select/Deselect All</label>
</div>
</div>
</div>
TS :
all = false;
checkAll(ev) {
if (!this.all) {
this.PrintList.forEach(x => x.checked = true)
this.isAllChecked()
} else {
this.PrintList.forEach(x => x.checked = false)
this.isAllChecked()
}
}
isAllChecked() {
this.all = !this.all
}
PrintList = [
{ id: 1, checked: false, value: "flowers" },
{ id: 2, checked: false, value: "fruits" },
{ id: 1, checked: false, value: "cars" },
{ id: 1, checked: false, value: "bikes" },
]
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.