Paginator length increase on page event angular material 2

Question

Using table with paginator. Binding data via http call. Version Angular 5, Material 5.0.4

On page event it fetch data from server, i tried to log if there is change in totallength variable but it's not .

What it is showing that length property of pagination which is return from page event is increasing.

It's weird i had also implemented on stackbliz to demonstrate and raise issue on github but there it works fine.

Same code ,same version but locally it's not working as expected.

Also adding gif to demonstrate.

HTML

 <mat-paginator #paginator [length]="totalLength"
             [pageSize]="limit"

             (page)="changePage($event)">
 </mat-paginator>

.TS

 changePage(event) {
  console.log(event,'total length',this.totalLength)
  if (this.totalLength > this.dataSource.data.length) {
  // next page
  this.skip = event.pageSize * event.pageIndex;
  this.getComplains(true);
  }
}


getComplains(addNew:boolean = false) {
this.http.getCustomerComplains({
  limit: this.limit,
  skip: this.skip,
  total: this.totalLength
}, (data) => {
  if (data) {
    setTimeout(() => {
      if (addNew === true) {
        let oldData = this.dataSource.data;
        this.dataSource.data = oldData.concat(data.list);
      } else {
        if (data['list']) {
          this.dataSource.data = data['list'];
        }
        this.changeDetectorRefs.detectChanges();
      }
      if (this.totalLength === 0) {
        this.totalLength = data['total'];
      }
    })
  }
}, (err) => {
  console.log(err);
})}

limit:number = 10;
skip:number = 0;
totalLength:number = 0;

why didn`t u add your answer here? as it is solved github.com/angular/material2/issues/10526 — Gregory Mazur
It's not being confirmed by angular material team, though i will add it later so it will help future developers facing same issue. — Narendra Singh Rathore

Narendra Singh Rathore Narendra Singh Rathore · Accepted Answer · 2019-03-21T05:57:43

Based on my discussion on github and finding a solution on my own, below is explanation based on my experience.

What i find is that , on start or you can say when i bind data to table data source. I also set paginator length property to total length return from http call *( if total length is 0 )

Now on page event that's to next page the total length property is having still same value as it's was on first binding. but length property of paginator vary.

What i understand from this ( https://material.angular.io/components/table/overview#pagination )

If you are using the MatTableDataSource for your table's data source, simply provide the MatPaginator to your data source. It will automatically listen for page changes made by the user and send the right paged data to the table.

the above apply to data which is static or all loaded once( via http call ), but if we want to load data on page event then, this below would apply

Otherwise if you are implementing the logic to paginate your data, you will want to listen to the paginator's (page) output and pass the right slice of data to your table.

So i removed this line

// this.dataSource.paginator = this.paginator;

And now it's working as expected.

So if data source is not dynamically changing or loaded all at once then we can simply provide the MatPaginator to your data source Or else we don't need to.

Paginator length increase on page event angular material 2

1 Answers