Angular HttpClient datasource paginator does not work

Question

I have the following implementation (Angular 6).

The data is pulled fine and shows in the table as expected. However the paginator doesn't work.

See below:

@ViewChild(MatPaginator) paginator: MatPaginator;

Then in the constructor:

    this.dataSource = new MatTableDataSource([]);

    this.requestHttpService.getStuff()
        .subscribe(data => {
            this.results = data;
            this.dataSource = data;
        });

Then

ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
}

And finally in HTML:

<mat-paginator #paginator
               [length]="100"
               [pageSize]="10"
               [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

I am not sure what is wrong with this code but none of those pagination features seem to be working. What am I missing.

score 1 · Answer 1 · answered Nov 01 '18 at 15:40

Turned out the datasource load had to be initiated from

           ngAfterViewInit() {
           }

...and the actual paginator assignment has to be wrapped in SetTimeout() function as per suggestion here:

            setTimeout(() => {
                this.dataSource = new MatTableDataSource(this.results);
                this.dataSource.paginator = this.paginator;
            });

Angular HttpClient datasource paginator does not work

1 Answers1