ERROR Error: Cannot set property 'paginator' of undefined

Question

I am creating Angular material table using this example: https://github.com/marinantonio/angular-mat-table-crud. The sample is connecting to the table using { DataSource } from '@angular/cdk/table'.

For my project i need to used MatTableDataSource from '@angular/material'as a table data connector, once i change the code to use MatTableDataSource i keep getting TypeError: Cannot set property 'paginator' of undefined.

There is a repro for my issue https://stackblitz.com/edit/angular-3rhawr

What am I doing wrong ? Any help will be appreciated.

SiddAjmera SiddAjmera · Accepted Answer · 2018-12-26T17:14:12

this.exampleDatabase.getAllIssues() is async in nature and may take time to complete. But ngAfterViewInit is going to be called before that. And since the dataSource is set in the subscribe block of this.exampleDatabase.getAllIssues(), hence the error.

Fix it by moving the code from ngAfterViewInit in the subscribe block. Something like this:

public loadData() {
  this.exampleDatabase = new DataService(this.httpClient);
  this.exampleDatabase.getAllIssues().subscribe(data => {
    this.dataSource = new MatTableDataSource(data);
    this.dataSource.data = data;
    this.dataLength = data.length;

    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  });
}

Here's a Working Sample StackBlitz without the error for your ref.

ERROR Error: Cannot set property 'paginator' of undefined

1 Answers