(fix): Update the elementSize of progress-spinner dynamically

Author: andreroggeri

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

@@ -1,8 +1,8 @@
+import {MatProgressSpinner, MatProgressSpinnerModule} from './index';
 import {TestBed, async} from '@angular/core/testing';
-import {Component} from '@angular/core';
-import {By} from '@angular/platform-browser';
-import {MatProgressSpinnerModule, MatProgressSpinner} from './index';
 
+import {By} from '@angular/platform-browser';
+import {Component} from '@angular/core';
 
 describe('MatProgressSpinner', () => {
 
@@ -224,6 +224,14 @@ describe('MatProgressSpinner', () => {
     expect(svgElement.getAttribute('viewBox')).toBe('0 0 38 38');
   });
 
+  it('should update the element size when changed dynamically', () => {
+    let fixture = TestBed.createComponent(BasicProgressSpinner);
+    let spinner = fixture.debugElement.query(By.directive(MatProgressSpinner));
+    spinner.componentInstance.diameter = 32;
+    fixture.detectChanges();
+    expect(spinner.nativeElement.style.width).toBe('32px');
+    expect(spinner.nativeElement.style.height).toBe('32px');
+  });
 });
 
 

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

@@ -6,20 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {CanColor, mixinColor} from '@angular/material/core';
 import {
-  Component,
   ChangeDetectionStrategy,
-  Input,
+  Component,
   ElementRef,
-  SimpleChanges,
+  Inject,
+  Input,
   OnChanges,
-  ViewEncapsulation,
   Optional,
-  Inject,
+  SimpleChanges,
+  ViewEncapsulation,
 } from '@angular/core';
-import {CanColor, mixinColor} from '@angular/material/core';
-import {Platform} from '@angular/cdk/platform';
+
 import {DOCUMENT} from '@angular/common';
+import {Platform} from '@angular/cdk/platform';
 import {coerceNumberProperty} from '@angular/cdk/coercion';
 
 /** Possible mode for a progress spinner. */
@@ -122,6 +123,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     if (!this._fallbackAnimation && !MatProgressSpinner.diameters.has(this._diameter)) {
       this._attachStyleNode();
     }
+    this._updateSpinnerDimension();
   }
   private _diameter = BASE_SIZE;
 
@@ -165,7 +167,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.strokeWidth || changes.diameter) {
-      this._elementSize = this._diameter + Math.max(this.strokeWidth - BASE_STROKE_WIDTH, 0);
+      this._updateSpinnerDimension();
     }
   }
 
@@ -229,6 +231,11 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
         .replace(/END_VALUE/g, `${0.2 * this._strokeCircumference}`)
         .replace(/DIAMETER/g, `${this.diameter}`);
   }
+
+  /** Updates the spinner element size based on its diameter. */
+  private _updateElementSize() {
+    this._elementSize = this._diameter + Math.max(this.strokeWidth - BASE_STROKE_WIDTH, 0);
+  }
 }