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

Answer 2

This table is not very user friendly, and it forces you to manually update, which misses the point of using Angular for the bindings. It is stated in the documentation that:

Since the table optimizes for performance, it will not automatically check for changes to the data array. Instead, when objects are added, removed, or moved on the data array, you can trigger an update to the table's rendered rows by calling its renderRows() method.

To call a method on the material table component from the Typescrypt code you need to do it through a ViewChild reference to the table. First add a hashtagged name to the table in the template:

<table #myTable mat-table ... >

Then on your Typescript file, declare a public member with the same name you put after the hashtag in the template, and decorate it with ViewChild so that Angular injects it (I wont be showing the imports):

export class SomeComponent implements OnInit {
    @ViewChild(MatTable) myTable!: MatTable<any>;

(The "!" is needed in new versions of Angular to trick Typescript into believing it will be always non null. Turns out it will. Keep reading)

So now you could do:

this.myTable.renderRows();   

And it would work unless the table or any of the parent is inside an *ngIf directive. When that directive is working, the table is not present in the DOM, and the member annotated with ViewChild will be undefined, so you can't call anything on it. This is not a problem of the material table in particular, it is how Angular is designed. Check this question for solutions. My favourite is to replace the *ngIf with [hidden]. That is ok if the directive was in the table, but becomes messy when it is in the parents.

Answer 3

@ViewChild('myTable') myTable: MatTableModule

You're not supposed to query for the string. This will query the reference (defined like <cmp #ref>). Also the type is wrong: you're not grabbing a module from the view, you're grabbing a component.

You should import the component you want to query and do the following (change according to which component exactly you need to query):

@ViewChild(MatTable) matTable: MatTable

The argument in the ViewChild decorator is the component you want to query and the type is just for your convenience -- you could omit it or say any, but you won't have any help from TypeScript if you do not do it so it's recommended to leave it.

Answer 4

You can use

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

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

anyFunction(): void {
   this.table.renderRows();
}

As mention on another's answers. Or you can pass the service to application state(@ngrx/store) For example:

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Store } from '@ngrx/store';

import * as reducer from '../../app.reducer';

export class Test implements OnInit {
dataSource = new MatTableDataSource<any>();

constructor(private _store: Store<reducer.State>){}

 ngOnInit(): void {
    this._store.select(reducer.getYourSelectorCreated)
      .subscribe(res) => { <<<<--- Subscribe to listen changes on your "table data -state"
        this.dataSource.data = res;  <<-- Set New values to table
      });
    this._someService.fetchYourDataFromStateFunction();  <<-- Service to change the state
  }
}