I am facing a challenge with a table that contains rows and checkboxes. There is one main checkbox in the header along with multiple checkboxes for each row. I am now searching for a function that can delete rows from the table when a delete button is clicked. The challenge is that it should delete all rows if the top checkbox is selected, which selects all rows. Additionally, it should be able to delete a single row when a specific row's checkbox is clicked. Below, I have provided the code snippet and a plunkr example from my application to give a clearer idea of row selection.
https://plnkr.co/edit/7l4AltdWfLGdLaXgF4vl?p=info
@Component({
select
or: 'my-app',
template: `
<div>
<h2>Hello Angular2</h2>
<table class="table table-bordered table-condensed table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Size</th>
<th>Diameter</th>
<th class="text-center">
<input type="checkbox" name="all" [checked]="isAllChecked()" (change)="checkAll($event)"/>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let size of sizes ; let i = index">
<td class="text-right">{{i + 1}}</td>
<td class="text-right">{{size.size}}</td>
<td>{{size.diameter}}</td>
<td class="text-center">
<input type="checkbox" name="sizecb[]" value="{{size.id}}" [(ngModel)]="size.state"/>
</td>
</tr>
</tbody>
</table>
</div>
`,
})
export class App {
sizes: any[] = [
{ 'size': '0', 'diameter': '16000 km' },
{ 'size': '1', 'diameter': '32000 km' },
{ 'size': '1', 'diameter': '32000 km' },
{ 'size': '1', 'diameter': '32000 km' },
{ 'size': '1', 'diameter': '32000 km' },
{ 'size': '1', 'diameter': '32000 km' },
{ 'size': '1', 'diameter': '32000 km' },
{ 'size': '1', 'diameter': '32000 km' }
];
checkAll(ev) {
this.sizes.forEach(x => x.state = ev.target.checked)
}
isAllChecked() {
return this.sizes.every(_ => _.state);
}
}
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}