fix(paginator): not emitting page event when pageIndex, pageSize or length changes

Currently the paginator won't fire the `page` event if it's `pageIndex`, `length` or `pageSize` change, which means that the associated table won't be able to react. These changes emit the event if the values change.

Fixes #12583.

Author: crisbeto

src/material/paginator/paginator.spec.ts

@@ -464,6 +464,34 @@ describe('MatPaginator', () => {
     expect(paginator.showFirstLastButtons).toBe(true);
   });
 
+  it('should emit the `page` event when the pageIndex is changed', () => {
+    const fixture = createComponent(MatPaginatorApp);
+    fixture.componentInstance.paginator.pageIndex = 2;
+
+    expect(fixture.componentInstance.pageEvent).toHaveBeenCalledWith(jasmine.objectContaining({
+      previousPageIndex: 0,
+      pageIndex: 2
+    }));
+  });
+
+  it('should emit the `page` event when the length is changed', () => {
+    const fixture = createComponent(MatPaginatorApp);
+    fixture.componentInstance.paginator.length = 1337;
+
+    expect(fixture.componentInstance.pageEvent).toHaveBeenCalledWith(jasmine.objectContaining({
+      length: 1337
+    }));
+  });
+
+  it('should emit the `page` event when the pageSize is changed', () => {
+    const fixture = createComponent(MatPaginatorApp);
+    fixture.componentInstance.paginator.pageSize = 27;
+
+    expect(fixture.componentInstance.pageEvent).toHaveBeenCalledWith(jasmine.objectContaining({
+      pageSize: 27
+    }));
+  });
+
 });
 
 function getPreviousButton(fixture: ComponentFixture<any>) {

src/material/paginator/paginator.ts

@@ -117,26 +117,42 @@ export class MatPaginator extends _MatPaginatorBase implements OnInit, OnDestroy
   @Input()
   get pageIndex(): number { return this._pageIndex; }
   set pageIndex(value: number) {
-    this._pageIndex = Math.max(coerceNumberProperty(value), 0);
-    this._changeDetectorRef.markForCheck();
+    const newPageIndex = Math.max(coerceNumberProperty(value), 0);
+    const oldPageIndex = this._pageIndex;
+
+    if (newPageIndex !== oldPageIndex) {
+      this._pageIndex = newPageIndex;
+      this._emitPageEvent(oldPageIndex);
+      this._changeDetectorRef.markForCheck();
+    }
   }
   private _pageIndex = 0;
 
   /** The length of the total number of items that are being paginated. Defaulted to 0. */
   @Input()
   get length(): number { return this._length; }
   set length(value: number) {
-    this._length = coerceNumberProperty(value);
-    this._changeDetectorRef.markForCheck();
+    const newLength = coerceNumberProperty(value);
+
+    if (newLength !== this._length) {
+      this._length = newLength;
+      this._emitPageEvent(this.pageIndex);
+      this._changeDetectorRef.markForCheck();
+    }
   }
   private _length = 0;
 
   /** Number of items to display on a page. By default set to 50. */
   @Input()
   get pageSize(): number { return this._pageSize; }
   set pageSize(value: number) {
-    this._pageSize = Math.max(coerceNumberProperty(value), 0);
-    this._updateDisplayedPageSizeOptions();
+    const newPageSize = Math.max(coerceNumberProperty(value), 0);
+
+    if (newPageSize !== this._pageSize) {
+      this._pageSize = newPageSize;
+      this._updateDisplayedPageSizeOptions();
+      this._emitPageEvent(this.pageIndex);
+    }
   }
   private _pageSize: number;