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; } }