CODEWITHSUNDEEP
paginationangular-material
tom33pr
tom33pr

Reputation: 1023

Angular HttpClient datasource paginator does not work

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.

Upvotes: 1

Views: 280

Answers (1)

tom33pr
tom33pr

Reputation: 1023

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;
            });

Upvotes: 1

Related Questions