Refresh mat-table in angular 9

Question

When I delete element my MAT-TABLE is not refresh

.ts file

import { MatTableDataSource, MatTable } from '@angular/material/table';
@ViewChild(MatTable) table: MatTable<any>;

const index = this.dataSource.data.findIndex(d => Number(d.id) == Number(id)); 
this.dataSource.data.splice(index, 1);
this.table.renderRows();

.html file

<table mat-table [dataSource]="dataSource" class="lessons-table mat-elevation-z8" matSort table>

Prefer immutable methods like filter and use triple-equals: this.dataSource.data = this.dataSource.data.filter(item => +item.id !== +id);. Doing that way, you don't need to use findIndex. — developer033
– developer033, Commented Mar 27, 2020 at 22:36

nash11 · Accepted Answer · 2020-03-27 21:58:38Z

1

For the mat-table data to update, you need to immutably assign the new array to your dataSource.

Try this.

this.dataSource.data = this.dataSource.data.splice(index, 1);

answered Mar 27, 2020 at 21:58

nash11

8,7603 gold badges23 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Refresh mat-table in angular 9

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related