JSON
[
{ position: 1, name: 'test', value: 1.0079, symbol: 'HHH' },
{ position: 2, name: 'test2', value: 4.0026, symbol: 'BBB' },
{ position: 3, name: 'test3', value: 6.941, symbol: 'BB' },
{ position: 4, name: 'test4', value: 9.0122, symbol: 'CC' },
]
TS
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
removeSelectedRows() {
this.selection.selected.forEach(item => {
let index: number = this.data.findIndex(d => d === item);
console.log(this.data.findIndex(d => d === item));
this.dataSource.data.splice(index,1);
this.dataSource = new MatTableDataSource<Element>(this.dataSource.data);
setTimeout(() => {
this.dataSource.paginator = this.paginator;
});
});
this.selection = new SelectionModel<Element>(true, []);
}
/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
}
HTML
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<!-- Checkbox Column -->
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<button mat-icon-button color="#b71c1c">
<mat-icon aria-label="Delete">delete</mat-icon>
</button>
</mat-cell>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef> value </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">
</mat-row>
</table>
</div>
i want to delete the entire row using one click button Explanation -> when i click on delete button the entire row should get delete but here I'm doing API call for example when i delete any row it will send name to the API!
here it is my stackbliz demo -https://stackblitz.com/edit/delete-rows-mat-table-f5f7tr?file=app%2Ftable-selection-example.ts