Angular Pagination In Frontend with Mat Paginator Example

paginator.ts

/* 
HTML
<mat-paginator
      [length]="data?.length"
      [pageSize]="pageSize"
      [pageIndex]="pageIndex"
      [pageSizeOptions]="[5, 10, 25, 100]"
      (page)="changePage($event)"
    >
    </mat-paginator> 
*/

//Table
data: IData[] = [];
dataSource: MatTableDataSource<IData> = new MatTableDataSource<IData>();

//Paginator
pageIndex: number = 0;
pageSize: number = 5;

getData() {
    this.dataService.findAll().subscribe({
      next: (response) => {
        this.data = response;
        this.changePage();
      },
      error: (error) => {
        console.error(error);
      },
    });
  }
  
changePage(event?: any) {
    if (event) {
      this.pageIndex = event.pageIndex;
      this.pageSize = event.pageSize;
      this.pageIndex = event.pageIndex;
    }
    this.dataSource.data = this.data.slice(
      this.pageIndex * this.pageSize,
      (this.pageIndex + 1) * this.pageSize
    );
  }