How to delete a single row from the table on clicking the icon/button

Question

I am using Table with pagination component in my project.I need to delete the single row at a time on clicking the delete icon. Here is the stackblitz link i have created.

Tried this link,here they have performed edit | update | delete operations.I want only delete operation.How can i achieve this?

Answer 1

Create a delete function like so:

delete(elm) {
  this.dataSource.data = this.dataSource.data.filter(i => i !== elm)
}

And call it from the HTML:

              <ng-container matColumnDef="columndelete">
                <th style="width:15%;" mat-header-cell *matHeaderCellDef> </th>
                <td  mat-cell *matCellDef="let element">       
                  <mat-icon (click)="delete(element)">delete</mat-icon> </td>
              </ng-container>

Here is a fork of the StackBlitz

EDIT

If you don't need to udpate the value of position, you can use:

<td mat-cell *matCellDef="let element; let idx = index"> {{ idx + 1 }} 

On the cell. This will display the correct value, but leave position unchanged.

If you want to change the position value as well, you can use:

   this.dataSource.data = this.dataSource.data
      .filter(i => i !== elm)
      .map((i, idx) => (i.position = (idx + 1), i)); // Update the position