problems linking paginator to MatTable

Question

I’m trying to add pagination to my mat-table in Angular 6. I’m using some of the examples in the link below. But it’s not working:

https://material.angular.io/components/table/examples

It looks like the mat-table populates with data properly and the paginator appears underneath it properly, but they’re failing to connect together:

As you can see, the paginator is set to 5 records per page, but there are more than records on the current page in the table. It also says 0 out of 0, which further indicates a failure to link to the table.

Here’s my html:

    <mat-table #table [dataSource]="dataSource" class="animate topMatDataTable”>
…
     </mat-table>
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" [pageSize]="5" showFirstLastButtons></mat-paginator>

Here’s my ts code:

export class DynamicDataListComponent implements OnInit {
…
  dataSource : MatTableDataSource<any>;
…
  @ViewChild(MatPaginator) paginator : MatPaginator;
…
  ngOnInit() {
…
    this.loadEndpoints();
  }

  async loadEndpoints() {
…
      const endpointListObs = await this._dataStorageService.getAPIEndpointList();
      endpointListObs.subscribe((endpointList: any[]) => {
        this.dataSource = new MatTableDataSource<any>(endpointList);
        this.dataSource.paginator = this.paginator;
…
      });
…
  }
…
}

Can anyone tell what I’m doing wrong?

Thanks.

score 1 · Answer 1 · answered Dec 20 '18 at 16:59

I figured it out.

Turns out the table along with the paginator were inside a div with an ngIf statement:

<div *ngIf="!isLoading">
...
</div>

That meant that the paginator wasn't being rendered until the data was done loading into the table.

So what I did was, first, took the initialization of the MatTableDataSource and the assignment of the paginator into ngAfterViewInit(). In loadEndpoints(), I assigned the endpointList to a variable instead:

this.endpointList = endpointList

Second, I put a timeout in ngAfterViewInit() that runs if isLoading is true or if the size of the list is 0. Otherwise, I then initialize the MatTableDataSource with the endpointList variable and assign it the paginator:

ngAfterViewInit() {
    if (this.isLoading || this.listSize === 0) {
      setTimeout(() => {
        this.ngAfterViewInit();
      }, 1000);
    } else {
      this.dataSource = new MatTableDataSource<any>(this.endpointList);
      this.dataSource.paginator = this.paginator;
    }
}

And it works!

You saved my day! I had also given the same ngIf condition and struggled for a couple of hours without knowing this truth! @Gibran — Steffi Keran Rani J, Jun 13 '19 at 15:22

score 0 · Answer 2 · answered Dec 19 '18 at 22:36

0

You're missing a reference to your paginator on your template. Change your template to include #paginator:

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" [pageSize]="5" showFirstLastButtons></mat-paginator>

answered Dec 19 '18 at 22:36

GCSDC

3,138
3
28
48

score 0 · Answer 3 · answered Dec 20 '18 at 04:27

0

Did you set datasource paginator to your paginator?

ngOnInit() {
    this.dataSource.paginator = this.paginator; //this sets the paginator to your datasource
 ....
    this.loadEndpoints();
}

answered Dec 20 '18 at 04:27

Akhi Akl

3,795
1
15
26

score 0 · Answer 4 · answered May 26 '20 at 23:22

0

<div [hidden]="!isLoading">
...
</div>

PS: I know the question is old and solution has already been provided.I had the same issue and it worked for me. using hidden solved my problem. Leaving it here for future visitors. credit

answered May 26 '20 at 23:22

Sanam

243
5
15

problems linking paginator to MatTable

4 Answers4