@angular/material/paginator#PageEvent TypeScript Examples

constructor(
    @Host() @Self() @Optional() private readonly matPag: MatPaginator,
    private readonly ViewContainer: ViewContainerRef,
    private readonly renderer: Renderer2
  ) {
    this.currentPage = 1;
    this.pageGapTxt = ['•••', '---'];
    this.showTotalPages = 3;
    this.checkPage = [0, 0, 0];
    // Display custom range label text
    this.matPag._intl.getRangeLabel = (page: number, pageSize: number, length: number): string => {
      const startIndex = page * pageSize;
      const endIndex = startIndex < length ?
        Math.min(startIndex + pageSize, length) :
        startIndex + pageSize;
      return length > 0 ? 'Showing ' + (startIndex + 1) + ' – ' + endIndex + ' of ' + length + ' records' : 'Showing 0 – 0 of 0 records';
    };
    // Subscribe to rerender buttons when next page and last page button is used
    this.matPag.page.subscribe((paginator: PageEvent) => {
      this.currentPage = paginator.pageIndex;
      this.matPag.pageIndex = paginator.pageIndex;
      this.initPageRange();
    });
  }

onUpdatePaginator(event: PageEvent): void {
    if (this.paginator.itemsPerPage !== event.pageSize) {
      this.paginator.itemsPerPage = event.pageSize;
    }
    if (this.paginator.page !== event.pageIndex + 1) {
      this.paginator.page = event.pageIndex + 1;
    }

    this.filterService.applyFilter({}, (data: Record<string, string>) =>
      this.retrieveData(data)
    );
  }

/**
	 * Handle pagination changes
	 */
	onPageEvent(ev: PageEvent): void {
		this.pageOptions = {
			...ev
		};

		if (this.firstPageEvent) {
			this.updateQueryParams(true);
			this.firstPageEvent = false;
		}
		else {
			this.updateQueryParams();
		}

		// Save PageIndex title attr
		this.appService.pushTitleAttributes({ name: 'PageIndex', value: `- ${ev.pageIndex}/${Number((ev.length / ev.pageSize).toFixed(0))}` });

		// Fetch new set of emotes
		this.getEmotes(ev.pageIndex).pipe(
			tap(emotes => this.emotes.next(emotes))
		).subscribe();
	}

private listenToStateChangeEvents(): void {
    this.dataSource.sort.sortChange
      .pipe(
        takeUntil(this.unsubscribeAll$)
      )
      .subscribe((sortChange: Sort) => {
        this._applySortChangesToUrlQueryParams(sortChange);
      });

    this.dataSource.paginator.page
      .pipe(
        takeUntil(this.unsubscribeAll$)
      )
      .subscribe((pageChange: PageEvent) => {
        this._applyPageStateChangesToUrlQueryParams(pageChange);
      });
  }

private _applyPageStateChangesToUrlQueryParams(pageChange: PageEvent): void {

    const sortingAndPaginationQueryParams = {
      page_size: pageChange.pageSize,
      page_index: pageChange.pageIndex,
    };

    this._router.navigate([], { queryParams: sortingAndPaginationQueryParams, queryParamsHandling: 'merge' });
  }

public onPageEvent(event: PageEvent) {
    if (!this.headlessResultPerPage.isSetTo(event.pageSize)) {
      // If page size change
      this.headlessResultPerPage.set(event.pageSize);
      this;
    } else {
      this.headlessPager.selectPage(event.pageIndex + 1);
    }
  }

handlePageChange(event: PageEvent) {
        if (event.pageSize !== this.currentPageSize) {
            this.staffWebTableService.setPageSize(event.pageSize);

            this.currentPageSize = event.pageSize;

            const numOfPages = this.paginator.getNumberOfPages();

            if (this.currentPageIndex > numOfPages - 1) {
                this.skipToPageFormGroup.patchValue({
                    pageIndex: numOfPages
                });
            }

            this.pageCountArray = this.getPageCountArray(numOfPages);

            this.changeDetectorRef.detectChanges();
        } else if (event.pageIndex !== this.currentPageIndex) {
            this.currentPageIndex = event.pageIndex;

            this.skipToPageFormGroup.patchValue(
                {
                    pageIndex: event.pageIndex + 1
                },
                {
                    emitEvent: false
                }
            );
        }
    }

public pageEventHandler(event: PageEvent): void {
    this.pagination.page = event.pageIndex + 1;
    this.pagination.pageSize = event.pageSize;
    this.paginationChange.emit(this.pagination);
  }

public pageEventHandler(event: PageEvent): void {
    const start = event.pageIndex * event.pageSize;
    const end = start + event.pageSize;
    this.list = this.data.slice(start, end);
    this.currentPage = event.pageIndex + 1;
  }

nextPage(event: PageEvent) {
    const request = {};
    request['page'] = event.pageIndex.toString();
    request['size'] = event.pageSize.toString();
    this.getTodos(request);
  }

// MatPaginator Output
  pageEvent: PageEvent;