Paginator length property set to length of table dataSource.data.length on pageEvent of paginator

Bug, feature request, or proposal:

Bug

What is the expected behavior?

It should not update to length of data of dataSource

What is the current behavior?

Paginator length property is set to length to dataSource.data.length on pageEvent

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

“@angular/animations”: “5.0.0”, “@angular/cdk”: “5.0.0”, “@angular/common”: “5.0.0”, “@angular/compiler”: “5.0.0”, “@angular/core”: “5.0.0”, “@angular/forms”: “5.0.0”, “@angular/http”: “5.0.0”, “@angular/material”: “5.0.0”, “@angular/platform-browser”: “5.0.0”,

Is there anything else we should know?

This is how i update or set the length for paginator

if(this.totalLength === 0){
  this.totalLength = data.total;
}

<mat-paginator #paginator [length]="totalLength"
               [pageSize]="limit"
               [pageSizeOptions]="pageLimit"
               (page)="changePage($event)">
</mat-paginator>`

limit:number = 10;
skip:number = 0;
totalLength:number = 0;
pageIndex : number = 0;
pageLimit:number[] = [5, 10] ;

changePage(event){
  console.log(event)
  if(this.totalLength > this.dataSource.data.length){
     if(this.pageIndex < event.pageIndex){
      // next page
      this.skip = this.skip + this.limit;
      this.getComplains(true);     
    }
  }
}

[narendrasinghrathore]

@andrewseguin 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.

[raymondle]

Thank @narendrasinghrathore , I have same issue and remove this line this.dataSource.paginator = this.paginator; help me resolved it.