CODEWITHSUNDEEP
angularpaginationangular-materialmat-table
Gibran Shah
Gibran Shah

Reputation: 1109

problems linking paginator to MatTable

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:

enter image description here

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.

Upvotes: 1

Views: 2398

Answers (4)

Sanam
Sanam

Reputation: 243

<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

Upvotes: 0

Gibran Shah
Gibran Shah

Reputation: 1109

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!

Upvotes: 1

Akhi Akl
Akhi Akl

Reputation: 3941

Did you set datasource paginator to your paginator?

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

Upvotes: 0

GCSDC
GCSDC

Reputation: 3540

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>

Upvotes: 0

Related Questions