fix(paginator): getNumberOfPages off by one (#10724)

Based off of #10720 (adding the demo page)

Changes the paginator's `getNumberOfPages` such that it returns the actual number of pages that are on the paginator rather than the max page index. This better matches the method name and description.

E.g. right now if you have one page, the function returns `0` rather than `1`, which is unexpected. 

Fixes #10699

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

@@ -338,6 +338,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

@@ -190,7 +190,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);
   }
 
@@ -201,13 +201,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);
   }