Angular Material Paginator is undefined

Question

I use Angular Material (MatTable, MatPaginator). when i log in to my application and my component view is loaded, i get the following error in my browser debugger:

    ERROR TypeError: "_this._paginator is undefined; can't access its "pageIndex" property"

    ExampleDataSource http://localhost:4200/main.js:1446
    __tryOrUnsub http://localhost:4200/vendor.js:160732
    next http://localhost:4200/vendor.js:160670
    _next http://localhost:4200/vendor.js:160603
    next http://localhost:4200/vendor.js:160578
    _subscribe http://localhost:4200/vendor.js:159751
    _trySubscribe http://localhost:4200/vendor.js:159963
    _trySubscribe http://localhost:4200/vendor.js:160384

my goal is to get rid of this error.

as there is too much code that could be responsible for this error, please see my component at my Github: https://github.com/chrs-k/Behaeltermanagement/tree/master/Behaeltermanagement/client/src/app/table

The problem must be located in the table.component.ts

Thank you very much in advance!

Answer 1

Paginator is marked with @ViewChild, and thus will not be loaded until ngAfterViewInit() is called. However, you put an instance of constructing a new ExampleDataSource inside loadData(), which is called in ngOnInit. But according to the order of Angular lifestyle hook methods, ngOnInit() will be called before ngAfterViewInit(). You have called it at least twice already before ngAfterViewInit(). So put this,loadData() into ngAfterViewInit, and up top you should have

dataSource: ExampleDataSource;

Remove anything that depends on this.paginator to instead be in ngAfterViewInit.