https://i.sstatic.net/RKWaC.png
I'm facing an issue with my code that allows me to select and deselect multiple rows in a table. Specifically, I'm struggling with implementing a SELECTALL/DESELECTALL feature using a master checkbox.
You can view the reproduced version of my code at this URL: https://stackblitz.com/edit/angular-ivy-bbx9jh?file=src/app/app.component.ts
HTML
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead class=" text-primary">
<th>
<input type="checkbox">
</th>
<th>
Product Name
</th>
<th>
Cost
</th>
<!-- <th>
City
</th>
<th>
Salary
</th> -->
</thead>
<tbody>
<tr *ngFor = "let data of productDataMultipleValue; let j = index;">
<td>
<span style="padding-left:20px;
">
<input type="checkbox" [checked]="data.checker"
(change)="checkboxMultiplier(data,$event,j)"></span></td>
<td >
<span style="padding-left:140px;
">{{data.namer}}</span>
</td>
<td>
<span style="padding-left:40px;
">{{data.coster}}</span>
</td>
<!-- <td>
{{}}
</td>
<td class="text-primary">
{{}}
</td> -->
</tr>
</tbody>
</table>
</div>
</div>
Now below you can find the Typescript part of my code
TS
saveMultiRows: any = [];
productDataMultipleValue: any = [
{"id":1,"namer":"wires","coster":25},
{"id":1,"namer":"pipes","coster":40},
{"id":1,"namer":"motors","coster":67},
{"id"1:"lights","coster":78},
{"id";1,"namer":"switches","coster":86}
]
checkboxMultiplier(rowObj: any,event: any,rowIndex: any) {
let temp =
{ "namer":rowObj.namer,
"coster" : rowObj.coster}
if (event.target.checked == true) {
this.saveMultiRows.push(temp);
} else if (event.target.checked == false) {
for (let j = 0; j < this.saveMultiRows.length; j++ ){
if (this.saveMultiRows[j].coster == rowObj.coster) {
this.saveMultiRows.splice(j,1);
}
}
}
console.log(this.saveMultiRows);
}
The code can also be viewed at: https://stackblitz.com/edit/angular-ivy-bbx9jh?file=src/app/app.component.ts