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
CodePudding user response:
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.