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

Author: andreroggeri

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

@@ -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

@@ -122,6 +122,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     if (!this._fallbackAnimation && !MatProgressSpinner.diameters.has(this._diameter)) {
       this._attachStyleNode();
     }
+    this._updateElementSize();
   }
   private _diameter = BASE_SIZE;
 
@@ -165,7 +166,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._updateElementSize();
     }
   }
 
@@ -229,6 +230,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);
+  }
 }