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/lib/paginator/paginator.spec.ts

@@ -361,6 +361,31 @@ describe('MatPaginator', () => {
         .toBeNull('Expected select to be removed.');
   });
 
+  it('should emit the `page` event when the pageIndex is changed', () => {
+    paginator.pageIndex = 2;
+
+    expect(component.pageEvent).toHaveBeenCalledWith(jasmine.objectContaining({
+      previousPageIndex: 0,
+      pageIndex: 2
+    }));
+  });
+
+  it('should emit the `page` event when the length is changed', () => {
+    paginator.length = 1337;
+
+    expect(component.pageEvent).toHaveBeenCalledWith(jasmine.objectContaining({
+      length: 1337
+    }));
+  });
+
+  it('should emit the `page` event when the pageSize is changed', () => {
+    paginator.pageSize = 27;
+
+    expect(component.pageEvent).toHaveBeenCalledWith(jasmine.objectContaining({
+      pageSize: 27
+    }));
+  });
+
 });
 
 function getPreviousButton(fixture: ComponentFixture<any>) {

src/lib/paginator/paginator.ts

@@ -76,26 +76,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();
+    }
   }
   _pageIndex: number = 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();
+    }
   }
   _length: number = 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;