matsen-tool-fe/matsen-tool/src/app/_components/paging/paging.component.ts

import {AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
import {NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
import {Observable, throwError} from "rxjs";
import {MatTableDataSource} from "@angular/material/table";
import {AppHelperService} from "@app/_helpers/app-helper.service";

@Component({
  selector: 'app-paging',
  templateUrl: './paging.component.html',
  styleUrl: './paging.component.scss'
})
export class PagingComponent implements OnInit {

    @Input() public dataSource!: any;
    @Input() public getDataFunction!: Function;
    @Input() public pageSize!: number;
    @Input() public pageSizeOptions!: number[];

    @ViewChild(MatPaginator) public paginator!: MatPaginator;

    private defaultPageSize: number = 10;
    private defaultPageSizeOptions: number[] = [10,20,50];

    public dataLength: number;
    public pageEvent: PageEvent;
    protected pageIndex: number;

    constructor(
    ) {
        this.dataLength = 0;
        this.pageEvent = new PageEvent();
        this.pageIndex = 0;
    }

    ngOnInit() {
        this.pageSize = this.pageSize !== undefined ? this.pageSize : this.defaultPageSize;
        this.pageSizeOptions = this.pageSizeOptions !== undefined ? this.pageSizeOptions : this.defaultPageSizeOptions;
        this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
    }

    ngAfterViewInit() {

        this.dataSource = this.paginator;
        this.getDataFunction();
    }

    handlePageEvent(e: PageEvent) {
        this.pageEvent = e;
        this.dataLength = e.length;
        this.pageIndex = e.pageIndex.valueOf();
        this.pageSize = e.pageSize.valueOf();
        this.getDataFunction();
    }

    getPageIndex(): number {
        return this.pageIndex + 1;
    }

    getPageSize(): number {
        return this.pageSize;
    }
}