Angular refresh table after delete record, using material table and rest api

Question

I have a material Table with expandable rows (https://material.angular.io/components/table/examples) and I want to manage delete into the table itself, so I create a delete button with a function that trigger the delete event. The api works, the record is correctly deleted, but the table is not refreshed after delete, and I want to implement this behaviour. Here a stackblitz with fake api: https://stackblitz.com/edit/angular-comzph

I try, in my delete function to call ngOnInt and to navigate back to the same route, but nothing happens...

deleteCustomer(id) {
 this.api.deleteCustomer(id)
  .subscribe(res => {
    alert(`cliente rimosso`);
    // TODO fix reload list after delete
    // this.router.navigate['/clienti'];
    this.ngOnInit();
  }, (err) => {
    console.log(err);
  }
 );
}

I try to use this solution too, but does not works. I try using ngOnChange and ngOnDestroy, but does not works too...

Could someone help me?

Instead of completely refreshing or re-initializing the component, you could refresh the table dataset by calling your api to fetch the data again. — Gijs Post
– Gijs Post, Commented Jul 11, 2018 at 8:10
I try to call this.api.getCustomers() inside the deleteCustomer() method too, but is not working — ufollettu
– ufollettu, Commented Jul 11, 2018 at 8:18
Maybe using pipe? this.api.deleteCustomer(id).pipe(flatMap(_ => this.api.getCustomers)).subscribe(result => { // Assign to data }) — Gijs Post
– Gijs Post, Commented Jul 11, 2018 at 8:25
no, do not works. maybe there's a problem with datasource property passed to mat-table html — ufollettu
– ufollettu, Commented Jul 11, 2018 at 9:00
I solve the problem using this solution: stackoverflow.com/questions/46746598/…, thanks for your help — ufollettu
– ufollettu, Commented Jul 11, 2018 at 9:11

Preston · Accepted Answer · 2018-07-11 14:24:31Z

5

There is no need to call the server for the updated data and download all the data again. Just call this function (below) and delete the row (splice) in the dataSource. Pass in the record id from your delete function and whatever the column name is where your id's are and magic happens. I include the paginator.

My StackBlitz for Angular Material Table has a working example. Also see my UpdateDatatableService which I use for CREATE AND UPDATE.

// Remove the deleted row from the data table. 
// Need to remove from the downloaded data first.

  private deleteRowDataTable (recordId, idColumn, paginator, dataSource) {
    this.dsData = dataSource.data;
    const itemIndex = this.dsData.findIndex(obj => obj[idColumn] === recordId);
    dataSource.data.splice(itemIndex, 1);
    dataSource.paginator = paginator;
  }

answered Jul 11, 2018 at 14:24

Preston

3,5444 gold badges40 silver badges52 bronze badges

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

1 Comment

Airo Over a year ago

The splice call returns the data without that row, if splicing the MatTableDataSource directly use - this.myDataSource = this.myDataSource.data.splice(index, 1);

MR-DS · Accepted Answer · 2020-11-16 16:02:44Z

The Angular documentation shows there is a method, renderRows() which is available on the <table mat-table> elements. I was having the same problems, implemented this method, and it works great. I also learnt that you can optionally provide a data stream instead of simple data. Below solves the rendering of rows with simple data.

In your HTML template, give the <table mat-table> element a property binding:

<table mat-table [dataSource]="data" #myTable> <!-- #table binding here -->
  <!-- table cells content etc... -->
</table>

In your component class, link to the template property with @ViewChild, and call the renderRows() method when the table data changes.

import { MatTable } from '@angular/material/table';

export class MyComponent {
    @ViewChild('myTable') myTable: MatTable<any>; /*not exatly sure what the type should be set too */

    editDataMethod(){
        /* data handling logic */
        this.myTable.renderRows();

}

ufollettu · Accepted Answer · 2018-07-11 09:16:02Z

1

I solved creating a new datasource for mat-table every time the customer list is refreshed. I need to provide ChangeDetectorRef to my constructor, then to write this code:

refreshCustomersList() {
 this.api.getCustomers()
  .subscribe(res => {
    console.log(res);
    this.clienti = res;
    this.dataSource = new ClientiDataSource(this.api);
    this.changeDetectorRefs.detectChanges();
  }, err => {
    console.log(err);
 });
}

And it works!

NB: This is a problem only if you are using mat-table datasource

answered Jul 11, 2018 at 9:16

ufollettu

8823 gold badges20 silver badges48 bronze badges

Collectives™ on Stack Overflow

Angular refresh table after delete record, using material table and rest api

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related