fix(paginator): getNumberOfPages off by one

Author: andrewseguin

src/demo-app/demo-app/demo-module.ts

@@ -64,7 +64,7 @@ import {TableDemoModule} from '../table/table-demo-module';
 import {BadgeDemo} from '../badge/badge-demo';
 import {TreeDemoModule} from '../tree/tree-demo-module';
 import {ConnectedOverlayDemo, DemoOverlay} from '../connected-overlay/connected-overlay-demo';
-import {PaginatorDemo} from 'paginator/paginator-demo';
+import {PaginatorDemo} from '../paginator/paginator-demo';
 
 @NgModule({
   imports: [

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

@@ -295,6 +295,23 @@ describe('MatPaginator', () => {
     expect(paginationEvent ? paginationEvent.pageIndex : null).toBe(0);
   });
 
+  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

@@ -159,7 +159,7 @@ export class MatPaginator implements OnInit, OnDestroy {
   lastPage(): void {
     // hasNextPage being false implies at the end
     if (!this.hasNextPage()) { return; }
-    this.pageIndex = this.getNumberOfPages();
+    this.pageIndex = this.getNumberOfPages() - 1;
     this._emitPageEvent();
   }
 
@@ -170,13 +170,13 @@ export class MatPaginator 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;
+    return Math.ceil(this.length / this.pageSize);
   }