Pagination - Type 'void' is not assignable to type 'PageEvent'

Question

Im trying to create a pagination with mat paginator but without table. My problem is now that im getting the error Type 'void' is not assignable to type 'PageEvent' for my pagination method.

Thats what i got:

HTML:

<mat-paginator 
  [length]="length"
  [pageSize]="pageSize"
  [pageSizeOptions]="pageSizeOptions"
  (page)="pageEvent = OnPageChange($event)"> //Here comes the error
</mat-paginator>

Typescript:

//Definitions
//Paginator
length = 100;
pageSize = 10;
pageSizeOptions: number[] = [5, 10, 25, 100];
// MatPaginator Output
pageEvent: PageEvent;
@ViewChild(MatPaginator) paginator: MatPaginator;

//My Method for change pages:
OnPageChange(event: PageEvent){
  let startIndex = event.pageIndex * event.pageSize;
  let endIndex = startIndex + event.pageSize;
  if(endIndex > this.length){
    endIndex = this.length;
  }
  this.pagedList = this.identFiltered.slice(startIndex, endIndex); //identFiltered is my Datasource
}

It seems that the defintion of pageEvent is wrong, but im not sure for now

Answer 1

So let's have a look on the line which throws the error:

(page)="pageEvent = OnPageChange($event)"

The code means whenever the page output emits an event assign the return value of OnPageChange($event) to the pageEvent variable.

The issue you have is that your function OnPageChange($event: PageEvent) does not return anything. Because of that your function does not have a return value and that's why its void.

To solve your issue either return $event in OnPageChange so it returns a PageEvent or simply don't try to assign the event to pageEvent in the HTML and move that to your function.