fix(progress-spinner): coerce string values

Coerces any string values that are passed to `value`, `diameter` and `strokeWidth` to numbers.

Fixes #7790.

Author: crisbeto

src/lib/progress-spinner/progress-spinner.spec.ts

@@ -1,7 +1,7 @@
 import {TestBed, async} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {MatProgressSpinnerModule} from './index';
+import {MatProgressSpinnerModule, MatProgressSpinner} from './index';
 
 
 describe('MatProgressSpinner', () => {
@@ -17,6 +17,7 @@ describe('MatProgressSpinner', () => {
         ProgressSpinnerCustomStrokeWidth,
         ProgressSpinnerCustomDiameter,
         SpinnerWithColor,
+        ProgressSpinnerWithStringValues,
       ],
     }).compileComponents();
   }));
@@ -174,6 +175,24 @@ describe('MatProgressSpinner', () => {
     expect(fixture.nativeElement.querySelector('svg').getAttribute('focusable')).toBe('false');
   });
 
+  it('should handle the number inputs being passed in as strings', () => {
+    const fixture = TestBed.createComponent(ProgressSpinnerWithStringValues);
+    const spinner = fixture.debugElement.query(By.directive(MatProgressSpinner));
+    const svgElement = spinner.nativeElement.querySelector('svg');
+
+    fixture.detectChanges();
+
+    expect(spinner.componentInstance.diameter).toBe(37);
+    expect(spinner.componentInstance.strokeWidth).toBe(11);
+    expect(spinner.componentInstance.value).toBe(25);
+
+    expect(spinner.nativeElement.style.width).toBe('38px');
+    expect(spinner.nativeElement.style.height).toBe('38px');
+    expect(svgElement.style.width).toBe('38px');
+    expect(svgElement.style.height).toBe('38px');
+    expect(svgElement.getAttribute('viewBox')).toBe('0 0 38 38');
+  });
+
 });
 
 
@@ -201,3 +220,10 @@ class SpinnerWithColor { color: string = 'primary'; }
 
 @Component({template: `<mat-progress-spinner value="50" [color]="color"></mat-progress-spinner>`})
 class ProgressSpinnerWithColor { color: string = 'primary'; }
+
+@Component({
+  template: `
+    <mat-progress-spinner value="25" diameter="37" strokeWidth="11"></mat-progress-spinner>
+  `
+})
+class ProgressSpinnerWithStringValues { }

src/lib/progress-spinner/progress-spinner.ts

@@ -21,6 +21,7 @@ import {
 import {CanColor, mixinColor} from '@angular/material/core';
 import {Platform} from '@angular/cdk/platform';
 import {DOCUMENT} from '@angular/common';
+import {coerceNumberProperty} from '@angular/cdk/coercion';
 
 /** Possible mode for a progress spinner. */
 export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
@@ -86,6 +87,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   private _value: number;
   private readonly _baseSize = 100;
   private readonly _baseStrokeWidth = 10;
+  private _strokeWidth = 10;
   private _fallbackAnimation = false;
 
   /** The width and height of the host element. Will grow with stroke width. **/
@@ -102,14 +104,23 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   get diameter(): number {
     return this._diameter;
   }
-
   set diameter(size: number) {
-    this._setDiameterAndInitStyles(size);
+    this._diameter = coerceNumberProperty(size);
+
+    if (!this._fallbackAnimation && !MatProgressSpinner.diameters.has(this._diameter)) {
+      this._attachStyleNode();
+    }
   }
-  _diameter = this._baseSize;
+  private _diameter = this._baseSize;
 
   /** Stroke width of the progress spinner. */
-  @Input() strokeWidth: number = 10;
+  @Input()
+  get strokeWidth(): number {
+    return this._strokeWidth;
+  }
+  set strokeWidth(value: number) {
+    this._strokeWidth = coerceNumberProperty(value);
+  }
 
   /** Mode of the progress circle */
   @Input() mode: ProgressSpinnerMode = 'determinate';
@@ -121,7 +132,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   }
   set value(newValue: number) {
     if (newValue != null && this.mode === 'determinate') {
-      this._value = Math.max(0, Math.min(100, newValue));
+      this._value = Math.max(0, Math.min(100, coerceNumberProperty(newValue)));
     }
   }
 
@@ -181,14 +192,6 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     return this.strokeWidth / this._elementSize * 100;
   }
 
-  /** Sets the diameter and adds diameter-specific styles if necessary. */
-  private _setDiameterAndInitStyles(size: number): void {
-    this._diameter = size;
-    if (!MatProgressSpinner.diameters.has(this.diameter) && !this._fallbackAnimation) {
-      this._attachStyleNode();
-    }
-  }
-
   /** Dynamically generates a style tag containing the correct animation for this diameter. */
   private _attachStyleNode(): void {
     let styleTag = MatProgressSpinner.styleTag;