Angular – 3 ways to handle Angular Material paginator component

Solution #1

component.html example code:

<mat-paginator
(page)="pageEvent = $event"
[length]="itemsLength"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
></mat-paginator>

<div>{{ pageEvent.pageSize }} | {{ pageEvent.pageIndex }}</div>

component.ts example code:

pageEvent: PageEvent = new PageEvent();

Solution #2

component.html example code:

<mat-paginator
(page)="onPaginatorChange($event)"
[length]="itemsLength"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
></mat-paginator>

component.ts example code:

onPaginatorChange(event: any) {
console.log(event);
}

Solution #3

component.html example code:

<mat-paginator
#paginator
[length]="itemsLength"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
></mat-paginator>

component.ts example code:

@ViewChild(MatPaginator) paginator: MatPaginator | any = {};
ngAfterViewInit() {
this.paginator.page.subscribe((data: any) => {
console.log(data);
})
}

• Share on Facebook