fix(paginator): update page index if invalid after length change

Updates the page index of a paginator if its length changed to something where the index isn't valid anymore (e.g. the user is on the last page and the amount of pages becomes smaller).

Fixes #14520.

Author: crisbeto

src/material/paginator/paginator.spec.ts

@@ -413,6 +413,27 @@ describe('MatPaginator', () => {
     expect(getLastButton(fixture).hasAttribute('disabled')).toBe(true);
   });
 
+  it('should update the page index when switching to a smaller length', fakeAsync(() => {
+    fixture.componentInstance.length = 50;
+    fixture.componentInstance.pageSize = 10;
+    fixture.componentInstance.pageIndex = 4;
+    fixture.detectChanges();
+
+    expect(paginator.pageIndex).toBe(4);
+
+    fixture.componentInstance.pageEvent.calls.reset();
+
+    fixture.componentInstance.length = 10;
+    fixture.detectChanges();
+    tick();
+
+    expect(paginator.pageIndex).toBe(0);
+    expect(fixture.componentInstance.pageEvent).toHaveBeenCalledWith(jasmine.objectContaining({
+      previousPageIndex: 4,
+      pageIndex: 0
+    }));
+  }));
+
 });
 
 function getPreviousButton(fixture: ComponentFixture<any>) {

src/material/paginator/paginator.ts

@@ -100,6 +100,18 @@ export class MatPaginator extends _MatPaginatorBase implements OnInit, OnDestroy
   get length(): number { return this._length; }
   set length(value: number) {
     this._length = coerceNumberProperty(value);
+
+    const maxPageIndex = Math.max(this.getNumberOfPages() - 1, 0);
+    const currentPageIndex = this._pageIndex;
+
+    if (currentPageIndex > maxPageIndex && this.initialized) {
+      // Needs to happen on the next tick, in order to avoid "changed after checked" errors.
+      Promise.resolve().then(() => {
+        this._pageIndex = maxPageIndex;
+        this._emitPageEvent(currentPageIndex);
+      });
+    }
+
     this._changeDetectorRef.markForCheck();
   }
   private _length = 0;