Is there any way to update mat-table data source when some one add new record?

Question

I'm using angular material mat-table to view records from database but when someone add new record to the database it doesn't appear in the table so I need to reload the page to get updated.

Is there any way to make data source updated without reload the page?

score 0 · Answer 1 · answered Mar 16 '20 at 11:59

To update the table you can call renderRows() on Angular Material Table.

import ViewChild and MatTable:

import {Component, ViewChild} from '@angular/core';
import {MatTable} from '@angular/material';

Then you can get a reference to the table using the ViewChild

@ViewChild(MatTable) table: MatTable<any>;

Then when you modify the table in any way you will need to call the renderRows() method.

updateTable(row: any): void {
  /* update logic here */
  this.table.renderRows();
}

Check this example: https://stackblitz.com/edit/angular-bxrahf

Is there any way to update mat-table data source when some one add new record?

1 Answers1