diff --git a/src/lib/progress-spinner/progress-spinner.spec.ts b/src/lib/progress-spinner/progress-spinner.spec.ts index 2c5bce299b7a..d00d31881999 100644 --- a/src/lib/progress-spinner/progress-spinner.spec.ts +++ b/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'); + }); }); diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts index c112ac63dd5a..e73bb21bdb26 100644 --- a/src/lib/progress-spinner/progress-spinner.ts +++ b/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); + } }