fix(paginator): coerce string values (#8946)

Author: rafaelss95

src/lib/paginator/paginator.spec.ts

@@ -23,6 +23,7 @@ describe('MatPaginator', () => {
         MatPaginatorWithoutPageSizeApp,
         MatPaginatorWithoutOptionsApp,
         MatPaginatorWithoutInputsApp,
+        MatPaginatorWithStringValues
       ],
       providers: [MatPaginatorIntl]
     }).compileComponents();
@@ -251,6 +252,18 @@ describe('MatPaginator', () => {
     fixture.detectChanges();
     expect(fixture.nativeElement.querySelector('.mat-select')).toBeNull();
   });
+
+ it('should handle the number inputs being passed in as strings', () => {
+    const withStringFixture = TestBed.createComponent(MatPaginatorWithStringValues);
+    const withStringPaginator = withStringFixture.componentInstance.paginator;
+
+    withStringFixture.detectChanges();
+
+    expect(withStringPaginator.pageIndex).toEqual(0);
+    expect(withStringPaginator.length).toEqual(100);
+    expect(withStringPaginator.pageSize).toEqual(10);
+    expect(withStringPaginator.pageSizeOptions).toEqual([5, 10, 25, 100]);
+  });
 });
 
 function getPreviousButton(fixture: ComponentFixture<any>) {
@@ -264,10 +277,10 @@ function getNextButton(fixture: ComponentFixture<any>) {
 @Component({
   template: `
     <mat-paginator [pageIndex]="pageIndex"
-                  [pageSize]="pageSize"
-                  [pageSizeOptions]="pageSizeOptions"
-                  [length]="length"
-                  (page)="latestPageEvent = $event">
+                   [pageSize]="pageSize"
+                   [pageSizeOptions]="pageSizeOptions"
+                   [length]="length"
+                   (page)="latestPageEvent = $event">
     </mat-paginator>
   `,
 })
@@ -312,3 +325,16 @@ class MatPaginatorWithoutPageSizeApp {
 class MatPaginatorWithoutOptionsApp {
   @ViewChild(MatPaginator) paginator: MatPaginator;
 }
+
+@Component({
+  template: `
+    <mat-paginator pageIndex="0"
+                   pageSize="10"
+                   [pageSizeOptions]="['5', '10', '25', '100']"
+                   length="100">
+    </mat-paginator>
+  `
+  })
+class MatPaginatorWithStringValues {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+}

src/lib/paginator/paginator.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -64,7 +65,7 @@ export class MatPaginator implements OnInit, OnDestroy {
   @Input()
   get pageIndex(): number { return this._pageIndex; }
   set pageIndex(pageIndex: number) {
-    this._pageIndex = pageIndex;
+    this._pageIndex = coerceNumberProperty(pageIndex);
     this._changeDetectorRef.markForCheck();
   }
   _pageIndex: number = 0;
@@ -73,7 +74,7 @@ export class MatPaginator implements OnInit, OnDestroy {
   @Input()
   get length(): number { return this._length; }
   set length(length: number) {
-    this._length = length;
+    this._length = coerceNumberProperty(length);
     this._changeDetectorRef.markForCheck();
   }
   _length: number = 0;
@@ -82,7 +83,7 @@ export class MatPaginator implements OnInit, OnDestroy {
   @Input()
   get pageSize(): number { return this._pageSize; }
   set pageSize(pageSize: number) {
-    this._pageSize = pageSize;
+    this._pageSize = coerceNumberProperty(pageSize);
     this._updateDisplayedPageSizeOptions();
   }
   private _pageSize: number;
@@ -91,7 +92,7 @@ export class MatPaginator implements OnInit, OnDestroy {
   @Input()
   get pageSizeOptions(): number[] { return this._pageSizeOptions; }
   set pageSizeOptions(pageSizeOptions: number[]) {
-    this._pageSizeOptions = pageSizeOptions;
+    this._pageSizeOptions = (pageSizeOptions || []).map(p => coerceNumberProperty(p));
     this._updateDisplayedPageSizeOptions();
   }
   private _pageSizeOptions: number[] = [];