Angular Material paginator nextPage property

Question

I have a total of 250 items and I'm displaying 5 of them i.e. pageSize is set to 5. and I've set the paginator.length property to items.length

Now, there are two problems here:

Even though I've manually set the paginator.length but when I console.log the properties of paginator, it shows 5 (Which is the number of items I'm displaying per page). hence the next button of paginator is disabled.

How do I enable the next button, so that when it is clicked I would know and request the next data to server. Remember: I'm using only back-end pagination for this regard. Pagination information is passed in response headers from the server. Here is my code

pageIndex=1;
pageNumber;
pagination;
ngOnInit(): void {
    this.paginator.pageSize = 5;
    this.paginator.pageIndex = this.pageIndex;

    this.salesReportService.getDailyReport().subscribe((response) => {
      console.log('Response of sales report : ', response);
      this.reports = response.body;
      this.pagination=response.headers.get('X-Pagination');
      console.log('PaginationInformation: ',this.pagination)

      this.paginator.length=this.pagination.TotalCount;

      console.log('paginator properties: ', this.paginator);
      console.log('paginator hasNextpage(): ', this.paginator.hasNextPage());
      this.dataSource = new MatTableDataSource(this.reports);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }, (error) => {
      console.log('Error occured while fetching sales report: ', error);
    });
  }
// here I'd call the function to get the next data when the next button of paginator is clicked.

// something like this
this.salesReportService.getReports(pageNumber:2)

I am facing same issue. Above answer did not help me. https://stackoverflow.com/questions/66060058/angular-material-paginator-nextpage-is-disabled — user14463446, Feb 05 '21 at 08:38

score 2 · Answer 1 · answered Jan 22 '20 at 04:58

This is because you set paginator length in the first place and later trying to execute below lines

   this.dataSource = new MatTableDataSource(this.reports);
  this.dataSource.paginator = this.paginator;

which makes paginator to set length to data available in datasource.

So, after the above two lines keep the below line in your code.

  this.paginator.length=this.pagination.TotalCount; // this.paginator.length= 'No Of Records';

Hope it helps!

Angular Material paginator nextPage property

1 Answers1