fix(paginator): Enhance totalPages check #6861

Author: zdrawku

projects/igniteui-angular/src/lib/paginator/paginator.component.ts

@@ -83,8 +83,8 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
         this.perPageChange.emit(this._perPage);
         this._selectOptions = this.sortUniqueOptions(this.defaultSelectValues, this._perPage);
         this.totalPages = Math.ceil(this.totalRecords / this._perPage);
-        if (this._page >= this.totalPages) {
-            this._page = this.totalPages - 1;
+        if (this.totalPages !== 0 && this.page >= this.totalPages) {
+            this.page = this.totalPages - 1;
         }
     }
 

src/app/grid-remote-paging/grid-remote-paging.sample.html

@@ -10,11 +10,13 @@
     <ng-template #customPager let-api>
         <igx-paginator #paginator
             [totalRecords]="totalCount"
+            [(page)]="page"
             [(perPage)]="perPage"
             [selectLabel]="'Records per page:'"
             [selectOptions]="selectOptions"
             [displayDensity]="grid1.displayDensity"
-            (pageChange)="paginate($event)">
+            (pageChange)="paginate($event)"
+            (perPageChange)="perPageChange($event)">
         </igx-paginator>
     </ng-template>
 </div>

src/app/grid-remote-paging/grid-remote-paging.sample.ts

@@ -1,7 +1,8 @@
 import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { IgxGridComponent } from 'igniteui-angular';
+import { IgxGridComponent, IgxPaginatorComponent } from 'igniteui-angular';
 import { RemoteService } from '../shared/remote.service';
 import { Observable } from 'rxjs';
+import { IgxGridPaginatorOptionsPipe } from 'projects/igniteui-angular/src/lib/grids/common/pipes';
 
 @Component({
     selector: 'app-grid-remote-paging-sample',
@@ -30,7 +31,7 @@ export class GridRemotePagingSampleComponent implements OnInit, AfterViewInit, O
 
     public set perPage(val: number) {
         this._perPage = val;
-        this.paginate(0);
+        // this.paginate(0);
     }
 
     public ngOnInit() {
@@ -60,4 +61,12 @@ export class GridRemotePagingSampleComponent implements OnInit, AfterViewInit, O
 
         this.remoteService.getPagingData(skip, top);
     }
+
+    public perPageChange(perPage: number) {
+        debugger;
+        const skip = this.page * perPage;
+        const top = perPage;
+
+        this.remoteService.getPagingData(skip, top);
+    }
 }