problems linking paginator to MatTable

mat-paginator not working in dynamically generated table
viewchild mat-paginator angular 8
mattabledatasource
mat-paginator next page event
viewchild(matpaginator, (static: true)) paginator: matpaginator
this.paginator is undefined
customize mat-paginator
can t bind to 'pagesizeoptions' since it isn t a known property of 'mat-paginator

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.

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!

Linking paginator to mattable · Issue #553 · SamProf/MatBlazor , Hi, hope you can help. I've got the paginator component and table component on a page and I want to disable the one that is displayed with the  If you are using MatTable then simply don't connect the paginator to the datasource and nix this code: this.dataSource.paginator = this.paginator. This solved my issue. I had no idea that assigning the paginator to the data source would overwrite the length I was providing. You would think it would be the other way around.

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>

MatPaginator not working in dynamically generated table. · Issue , I am generating data Dynamically, and displaying it in Data Table, but I`m unable to link MatPaginator with the data table. Data is getting  <MatTable Items="CoursesList" ShowPaging="true" PageSize="10"> 10 records in the table <MatTable Items="CoursesList" ShowPaging="false" PageSize="10"> 5 records in the table. I'm simply using this to show all the records as paging is done outside of this component as it's using odata.

Did you set datasource paginator to your paginator?

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

Angular Material Data Table: A Complete Example, <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource"> To answer that, let's then talk about the data source that is linked to this In our case, all the filtering, sorting and pagination will be happening on the The problem is that this initial example is always loading only the first  This page will walk through Angular Material table with sorting and pagination. To support Angular Material table we need to import MatTableModule, for sorting, import MatSortModule and for pagination, import MatPaginatorModule in application module.

<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

How to use paginator from material angular? - angular - html, 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  Introduction to the Angular Material Data Table. The Material Data Table component is a generic component for displaying tabulated data. Although we can easily give it a Material Design look and feel, this is actually not mandatory. In fact, we can give the Angular Material Data table an alternative UI design if needed.

Table, The mat-table provides a Material Design styled data-table that can be used to display rows of data. A DataSource is simply a base class that has two functions: connect and disconnect . For example, you can add sorting and pagination to the table by using There is currently an open issue with Edge to resolve this. Bug, feature request, or proposal: Currently it is not possible to use the paginator with dynamic data that comes from Subjects (or initially Observables). The paginator seems to work with _data (initialData) set in the MatTableDataSourc

Mat Sort and Mat Paginator problem : Angular2, Mat Sort and Mat Paginator problem Since the method is from another service, I could easily connect the two and have it take affect So how do I solve this problem? <app-viewport> <mat-table #table [dataSource]="dataSource" matSort>  The problem appears to be that when you are connecting a paginator to the MatTableDataSource, you are providing a way for the paginator to update the length property based on that data source. If you are also providing length as well, that length value will be overwritten when the data source gets updated.

Multiple Paginators in a single HTML File programmed with Angular , Attaching Mat-Paginator to a Mat-Table when there is one Mat-Table Declare the Mat-Paginator in the .ts file and Link the Mat-Paginator to the Mat-Table Data Source. To overcome this issue, the following needs doing. But as you can see inside the comments, i had problems to get the this.dataSource.sort and this.dataSource.paginator running. After i posted my comment, i searched a bit and found out, that there is a problem with the ViewChild from Angular.

Comments
  • You saved my day! I had also given the same ngIf condition and struggled for a couple of hours without knowing this truth! @Gibran