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

Question

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?

Answer 1

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.