Angular 8 Material table with sorting works fine locally but not on Stackblitz / different @ViewChild timing?

user_7375080 0
Viewed 207

For demonstration purpose I created a rich featured Angular 8 Material table demo, that runs fine locally, but not on Stackblitz.

Stackblitz demo

The demo shows in one single table

  • inline editing,
  • drag and drop,
  • pagination, (<- has initialization problem on Stackblitz)
  • sorting and (<- has problem on Stackblitz)
  • add/remove data.

As far as I can interpret the console, the error araises from the fact, that the component properties holding the sort (this._sort) and pagination (this._pagination) should be set by @ViewChild() but are still undefined even in ngAfterViewInit(){}.

Stackblitz Console

  • Error: this._sort is undefined
  • Error: this._paginator is undefined

Question: any idea why it works fine locally, but not on Stackblitz. Did I do a mistake and having it run locally is just by chance?

material-table angular-material angular
1 Answers

Using direct imports in your Stackblitz seems to solve your errors:

import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule} from '@angular/material/paginator';

Check the adapted Stackblitz.

user_100360390
Related