Removing selected rows from the table in angular 2 using angular material table
24,224
Solution 1
You should be removing the selected items and refresh the datasource
as below,
removeSelectedRows() {
this.selection.selected.forEach(item => {
let index: number = this.data.findIndex(d => d === item);
console.log(this.data.findIndex(d => d === item));
this.data.splice(index,1)
this.dataSource = new MatTableDataSource<Element>(this.data);
});
this.selection = new SelectionModel<Element>(true, []);
}
Solution 2
You can use the renderRows()
method from the MatTable
API.
This way you don't have to re-instantiate the array on every click.
Solution 3
Can you try below?
removeSelectedRows() {
var oldData = this.dataSource.data;
var oldData = oldData.filter((item) => !this.selection.selected.includes(item));
this.dataSource = new MatTableDataSource<Topic>(oldData);
this.selection.clear()
this.dataSource.filter = "";
}
Author by
Heena
Updated on March 20, 2021Comments
-
Heena over 3 years
I am trying to implement a simple table in angular 2 using angular material selection table .
I used a button to remove the selected rows from the table.But on click of the button how can i delete the rows ?
Below shown is my html file for the table
<div class="example-container mat-elevation-z8"> <mat-table #table [dataSource]="dataSource"> <!-- Checkbox Column --> <ng-container matColumnDef="select"> <mat-header-cell style="max-width: 100px;" *matHeaderCellDef> <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()"> </mat-checkbox> </mat-header-cell> <mat-cell style="max-width: 100px;" *matCellDef="let row"> <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"> </mat-checkbox> </mat-cell> </ng-container> <!-- Number Column --> <ng-container matColumnDef="num"> <mat-header-cell style="max-width: 100px;" *matHeaderCellDef> No. </mat-header-cell> <mat-cell style="max-width: 100px;" *matCellDef="let element"> {{element.num}} </mat-cell> </ng-container> <!-- Message Column --> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef> Message </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.name}} </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> </mat-table> <mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"> </mat-paginator> </div> <br/> <button style="background: #3B4990; color:white;" (click)="deleted($event)">Remove Selected Messages</button>
Below shown is my .ts file.
import {Component, ViewChild} from '@angular/core'; import {MatPaginator, MatTableDataSource} from '@angular/material'; import {SelectionModel} from '@angular/cdk/collections'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'] }) export class HomeComponent { displayedColumns = ['select', 'num', 'name']; dataSource = new MatTableDataSource<Element>(ELEMENT_DATA); @ViewChild(MatPaginator) paginator: MatPaginator; /** * Set the paginator after the view init since this component will * be able to query its view for the initialized paginator. */ ngAfterViewInit() { this.dataSource.paginator = this.paginator; } selection = new SelectionModel<Element>(true, []); /** Whether the number of selected elements matches the total number of rows. */ isAllSelected() { const numSelected = this.selection.selected.length; const numRows = this.dataSource.data.length; return numSelected === numRows; } /** 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)); } deleted($event) { delete(this.dataSource.data.forEach(row => this.selection.select(row));) } } export interface Element { name: string; num: number; } const ELEMENT_DATA: Element[] = [ {num: 1, name: 'Message1'}, {num: 2, name: 'Message2'}, {num: 3, name: 'Message3'}, {num: 3, name: 'Message4'}, {num: 4, name: 'Message5'}, {num: 5, name: 'Message6'}, ];
can anybody please help me how can i remove the selected rows from the table using the button.