From 603a7d3823b2e74fd26e77261f9a87af39fd9a3d Mon Sep 17 00:00:00 2001
From: Ibrahim Azez <ibrahimazez@protonmail.com>
Date: Tue, 27 Feb 2024 14:56:19 +0300
Subject: [PATCH] feat: expose pagination api

---
 .../lib/components/pager/pager.component.ts   |  9 +++++----
 .../src/lib/components/pager/types.ts         |  1 +
 .../src/lib/ng2-smart-table.component.html    |  2 +-
 .../src/lib/ng2-smart-table.component.ts      | 19 +++++++++++--------
 4 files changed, 18 insertions(+), 13 deletions(-)
 create mode 100644 projects/ng2-smart-table/src/lib/components/pager/types.ts

diff --git a/projects/ng2-smart-table/src/lib/components/pager/pager.component.ts b/projects/ng2-smart-table/src/lib/components/pager/pager.component.ts
index 36ce0e286..23e12564f 100644
--- a/projects/ng2-smart-table/src/lib/components/pager/pager.component.ts
+++ b/projects/ng2-smart-table/src/lib/components/pager/pager.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from
 import { Subscription } from 'rxjs';
 
 import { DataSource } from '../../lib/data-source/data-source';
+import {ChangePageResult} from "./types";
 
 @Component({
   selector: 'ng2-smart-table-pager',
@@ -39,7 +40,7 @@ import { DataSource } from '../../lib/data-source/data-source';
             <span class="sr-only">Next</span>
           </a>
         </li>
-        
+
         <li class="ng2-smart-page-item page-item"
         [ngClass]="{disabled: getPage() == getLast()}">
           <a class="ng2-smart-page-link page-link" href="#"
@@ -50,7 +51,7 @@ import { DataSource } from '../../lib/data-source/data-source';
         </li>
       </ul>
     </nav>
-    
+
     <nav *ngIf="perPageSelect && perPageSelect.length > 0" class="ng2-smart-pagination-per-page">
       <label for="per-page">
         Per Page:
@@ -66,13 +67,13 @@ export class PagerComponent implements OnChanges {
   @Input() source: DataSource;
   @Input() perPageSelect: any[] = [];
 
-  @Output() changePage = new EventEmitter<any>();
+  @Output() changePage = new EventEmitter<ChangePageResult>();
 
   currentPerPage: any;
 
   protected pages: Array<any>;
   protected page: number;
-  protected count: number = 0;
+  protected count = 0;
   protected perPage: number;
 
   protected dataChangedSub: Subscription;
diff --git a/projects/ng2-smart-table/src/lib/components/pager/types.ts b/projects/ng2-smart-table/src/lib/components/pager/types.ts
new file mode 100644
index 000000000..d70e89fd8
--- /dev/null
+++ b/projects/ng2-smart-table/src/lib/components/pager/types.ts
@@ -0,0 +1 @@
+export type ChangePageResult = {page: number};
diff --git a/projects/ng2-smart-table/src/lib/ng2-smart-table.component.html b/projects/ng2-smart-table/src/lib/ng2-smart-table.component.html
index 644e835d4..acc304fdb 100644
--- a/projects/ng2-smart-table/src/lib/ng2-smart-table.component.html
+++ b/projects/ng2-smart-table/src/lib/ng2-smart-table.component.html
@@ -30,5 +30,5 @@
 <ng2-smart-table-pager *ngIf="isPagerDisplay"
                         [source]="source"
                         [perPageSelect]="perPageSelect"
-                        (changePage)="changePage($event)">
+                        (changePage)="onPageChange($event)">
 </ng2-smart-table-pager>
diff --git a/projects/ng2-smart-table/src/lib/ng2-smart-table.component.ts b/projects/ng2-smart-table/src/lib/ng2-smart-table.component.ts
index b213821f9..b4b77b6be 100644
--- a/projects/ng2-smart-table/src/lib/ng2-smart-table.component.ts
+++ b/projects/ng2-smart-table/src/lib/ng2-smart-table.component.ts
@@ -7,6 +7,7 @@ import { DataSource } from './lib/data-source/data-source';
 import { Row } from './lib/data-set/row';
 import { deepExtend, getPageForRowIndex } from './lib/helpers';
 import { LocalDataSource } from './lib/data-source/local/local.data-source';
+import {ChangePageResult} from './components/pager/types';
 
 @Component({
   selector: 'ng2-smart-table',
@@ -16,7 +17,7 @@ import { LocalDataSource } from './lib/data-source/local/local.data-source';
 export class Ng2SmartTableComponent implements OnChanges, OnDestroy {
 
   @Input() source: any;
-  @Input() settings: Object = {};
+  @Input() settings: object = {};
 
   @Output() rowSelect = new EventEmitter<any>();
   @Output() rowDeselect = new EventEmitter<any>();
@@ -28,6 +29,7 @@ export class Ng2SmartTableComponent implements OnChanges, OnDestroy {
   @Output() deleteConfirm = new EventEmitter<any>();
   @Output() editConfirm = new EventEmitter<any>();
   @Output() createConfirm = new EventEmitter<any>();
+  @Output() changePage = new EventEmitter<ChangePageResult>();
   @Output() rowHover: EventEmitter<any> = new EventEmitter<any>();
 
   tableClass: string;
@@ -36,10 +38,10 @@ export class Ng2SmartTableComponent implements OnChanges, OnDestroy {
   isHideHeader: boolean;
   isHideSubHeader: boolean;
   isPagerDisplay: boolean;
-  rowClassFunction: Function;
+  rowClassFunction: (name: string, defaultValue?: any) => string;
 
   grid: Grid;
-  defaultSettings: Object = {
+  defaultSettings: object = {
     mode: 'inline', // inline|external|click-to-edit
     selectMode: 'single', // single|multi
     /**
@@ -94,7 +96,7 @@ export class Ng2SmartTableComponent implements OnChanges, OnDestroy {
     rowClassFunction: () => '',
   };
 
-  isAllSelected: boolean = false;
+  isAllSelected = false;
 
   private onSelectRowSubscription: Subscription;
   private onDeselectRowSubscription: Subscription;
@@ -102,10 +104,10 @@ export class Ng2SmartTableComponent implements OnChanges, OnDestroy {
 
   ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
     if (this.grid) {
-      if (changes['settings']) {
+      if (changes.settings) {
         this.grid.setSettings(this.prepareSettings());
       }
-      if (changes['source']) {
+      if (changes.source) {
         this.source = this.prepareSource();
         this.grid.setSource(this.source);
       }
@@ -226,11 +228,12 @@ export class Ng2SmartTableComponent implements OnChanges, OnDestroy {
     return new LocalDataSource();
   }
 
-  prepareSettings(): Object {
+  prepareSettings(): object {
     return deepExtend({}, this.defaultSettings, this.settings);
   }
 
-  changePage($event: any) {
+  onPageChange(changePageResult: ChangePageResult) {
+    this.changePage.emit(changePageResult);
     this.resetAllSelector();
   }