fix(paginator): getNumberOfPages off by one

Author: andrewseguin

src/demo-app/paginator/paginator-demo.html

@@ -22,7 +22,8 @@ <h2>No inputs</h2>
     <mat-slide-toggle [(ngModel)]="showFirstLastButtons">Show first/last buttons</mat-slide-toggle>
   </div>
 
-  <mat-paginator (page)="handlePageEvent($event)"
+  <mat-paginator #paginator
+                 (page)="handlePageEvent($event)"
                  [length]="length"
                  [pageSize]="pageSize"
                  [showFirstLastButtons]="showFirstLastButtons"
@@ -32,4 +33,5 @@ <h2>No inputs</h2>
   </mat-paginator>
 
   <div> Output event: {{pageEvent | json}} </div>
+  <div> getNumberOfPages: {{paginator.getNumberOfPages()}} </div>
 </mat-card>

src/lib/paginator/paginator.spec.ts

@@ -325,6 +325,23 @@ describe('MatPaginator', () => {
     }));
   });
 
+  it('should keep track of the right number of pages', () => {
+    component.pageSize = 10;
+    component.length = 100;
+    fixture.detectChanges();
+    expect(paginator.getNumberOfPages()).toBe(10);
+
+    component.pageSize = 10;
+    component.length = 0;
+    fixture.detectChanges();
+    expect(paginator.getNumberOfPages()).toBe(0);
+
+    component.pageSize = 10;
+    component.length = 10;
+    fixture.detectChanges();
+    expect(paginator.getNumberOfPages()).toBe(1);
+  });
+
   it('should show a select only if there are multiple options', () => {
     expect(paginator._displayedPageSizeOptions).toEqual([5, 10, 25, 100]);
     expect(fixture.nativeElement.querySelector('.mat-select')).not.toBeNull();

src/lib/paginator/paginator.ts

@@ -181,7 +181,7 @@ export class MatPaginator extends _MatPaginatorBase implements OnInit, OnDestroy
     if (!this.hasNextPage()) { return; }
 
     const previousPageIndex = this.pageIndex;
-    this.pageIndex = this.getNumberOfPages();
+    this.pageIndex = this.getNumberOfPages() - 1;
     this._emitPageEvent(previousPageIndex);
   }
 
@@ -192,13 +192,17 @@ export class MatPaginator extends _MatPaginatorBase implements OnInit, OnDestroy
 
   /** Whether there is a next page. */
   hasNextPage(): boolean {
-    const numberOfPages = this.getNumberOfPages();
-    return this.pageIndex < numberOfPages && this.pageSize != 0;
+    const maxPageIndex = this.getNumberOfPages() - 1;
+    return this.pageIndex < maxPageIndex && this.pageSize != 0;
   }
 
   /** Calculate the number of pages */
   getNumberOfPages(): number {
-    return Math.ceil(this.length / this.pageSize) - 1;
+    if (!this.pageSize) {
+      return 0;
+    }
+
+    return Math.ceil(this.length / this.pageSize);
   }