In my Angular table, I have a checkbox column.
When I check all checkboxes, they all get checked as expected.
Similarly, when I uncheck all checkboxes, they all get unchecked properly.
If I check just one checkbox, only that particular one gets checked, and if I then uncheck it, it becomes unchecked - this functionality is working correctly.
However, I am encountering an issue where, if I try to uncheck a checkbox after having checked all the checkboxes, instead of simply unchecking the box, the entire row is removed. i.e., the 'holidays' array also gets modified when trying to uncheck a checkbox after checking all of them.
Why is this issue happening?
This is the structure of my customized table:
<ngx-custom-table *ngIf="paginationLoad || selectedItems"
#table
[value]="holidays"
[selectedItems]="selectedItems"
>
<ng-template #header let-columns>
<tr>
<th>
<nb-checkbox (checkedChange)="OnCheckBoxchangeAll(holidays)"></nb-checkbox>
</th>
// remaining columns are omitted for brevity
</tr>
</ng-template>
<ng-template #body let-data>
<tr>
<td>
<nb-checkbox (checkedChange)="OnCheckBoxchange(data ,$event)" [checked]="selectedItems.indexOf(data) >=0"></nb-checkbox>
</td>
// remaining columns are omitted for brevity
</tr>
</ng-template>
</ngx-custom-table>
OnCheckBoxchange(data, isChecked: boolean){
console.log(data);
if(isChecked === true){
this.selectedItems.push(data);
}
else{
this.selectedItems.splice(this.selectedItems.findIndex(x => x.id === data.id), 1);
}
console.log("this.selectedItems", this.selectedItems);
console.log("this.holidays", this.holidays);
// here the data is also being removed from this.holidays. Why?
}
OnCheckBoxchangeAll(data){
this.checkedAll = !this.checkedAll;
if(this.checkedAll === true) {
this.selectedItems = data;
}
else {
this.selectedItems = [];
}
}
The data in this.holidays is fetched from an API.