Calling renderRows() on Angular Material Table

Question

I'm trying to get my Angular Table to refresh after updating the data used in the table.

The docs say "you can trigger an update to the table's rendered rows by calling its renderRows() method." but it is not like a normal child component where I can use something "@ViewChild(MatSort) sort: MatSort;" since I do not import it.

If I do import it and try something like @ViewChild('myTable') myTable: MatTableModule; then I get an error that says that renderRows() does not exist on that type.

How can I call this method? Thanks!

My table code snippet:

<mat-table #table [dataSource]="dataSource" myTable class="dataTable">

Answer 1

Make sure you 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 (note that a type T is required on MatTable - I just used any, but if you have a typed table, you will need to use that type:

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

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

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

Here is a very simple working example: https://stackblitz.com/edit/angular-bxrahf

Some sources I found when solving this issue myself:

• https://material.angular.io/cdk/table/api#CdkTable
• https://stackoverflow.com/a/49121032/8508548