fix(material/progress-bar): unable to change value through property setter

Fixes the progress bar not updating when its value is changed through the setter. Normally we don't really handle cases like this, but I decided to do it in this one, because:

1. We were already paying the payload price for the setter anyway so adding the `markForCheck` call won't be too expensive.
2. The progress bar is a bit of a special case where it might make sense not to go through the view to change a value. E.g. for something like a file upload where everything is being done in memory.

Fixes #18676.

Author: crisbeto

src/material-experimental/mdc-progress-bar/progress-bar.spec.ts

@@ -167,6 +167,43 @@ describe('MDC-based MatProgressBar', () => {
         expect(progressElement.componentInstance.color).toBe('warn');
       });
 
+      it('should update the DOM transform when the value has changed', () => {
+        const fixture = createComponent(BasicProgressBar);
+        fixture.detectChanges();
+
+        const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'))!;
+        const progressComponent = progressElement.componentInstance;
+        const primaryBar = progressElement.nativeElement
+          .querySelector('.mdc-linear-progress__primary-bar');
+
+        expect(primaryBar.style.transform).toBe('scaleX(0)');
+
+        progressComponent.value = 40;
+        fixture.detectChanges();
+
+        expect(primaryBar.style.transform).toBe('scaleX(0.4)');
+      });
+
+      it('should update the DOM transform when the bufferValue has changed', () => {
+        const fixture = createComponent(BasicProgressBar);
+        fixture.detectChanges();
+
+        const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'))!;
+        const progressComponent = progressElement.componentInstance;
+        const bufferBar = progressElement.nativeElement
+          .querySelector('.mdc-linear-progress__buffer-bar');
+
+        progressComponent.mode = 'buffer';
+        fixture.detectChanges();
+
+        expect(bufferBar.style.flexBasis).toBe('0%');
+
+        progressComponent.bufferValue = 40;
+        fixture.detectChanges();
+
+        expect(bufferBar.style.flexBasis).toBe('40%');
+      });
+
     });
 
     describe('animation trigger on determinate setting', () => {

src/material/progress-bar/progress-bar.spec.ts

@@ -210,6 +210,41 @@ describe('MatProgressBar', () => {
         expect(progressElement.componentInstance.color).toBe('warn');
       });
 
+      it('should update the DOM transform when the value has changed', () => {
+        const fixture = createComponent(BasicProgressBar);
+        fixture.detectChanges();
+
+        const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'))!;
+        const progressComponent = progressElement.componentInstance;
+        const primaryBar = progressElement.nativeElement.querySelector('.mat-progress-bar-primary');
+
+        expect(primaryBar.style.transform).toBe('scale3d(0, 1, 1)');
+
+        progressComponent.value = 40;
+        fixture.detectChanges();
+
+        expect(primaryBar.style.transform).toBe('scale3d(0.4, 1, 1)');
+      });
+
+      it('should update the DOM transform when the bufferValue has changed', () => {
+        const fixture = createComponent(BasicProgressBar);
+        fixture.detectChanges();
+
+        const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'))!;
+        const progressComponent = progressElement.componentInstance;
+        const bufferBar = progressElement.nativeElement.querySelector('.mat-progress-bar-buffer');
+
+        progressComponent.mode = 'buffer';
+        fixture.detectChanges();
+
+        expect(bufferBar.style.transform).toBeFalsy();
+
+        progressComponent.bufferValue = 40;
+        fixture.detectChanges();
+
+        expect(bufferBar.style.transform).toBe('scale3d(0.4, 1, 1)');
+      });
+
     });
 
     describe('animation trigger on determinate setting', () => {

src/material/progress-bar/progress-bar.ts

@@ -23,6 +23,7 @@ import {
   Output,
   ViewChild,
   ViewEncapsulation,
+  ChangeDetectorRef,
 } from '@angular/core';
 import {CanColor, mixinColor, ThemePalette} from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
@@ -127,16 +128,20 @@ export class MatProgressBar extends _MatProgressBarBase implements CanColor,
                */
               @Optional() @Inject(MAT_PROGRESS_BAR_LOCATION) location?: MatProgressBarLocation,
               @Optional() @Inject(MAT_PROGRESS_BAR_DEFAULT_OPTIONS)
-                  defaults?: MatProgressBarDefaultOptions) {
+                  defaults?: MatProgressBarDefaultOptions,
+              /**
+               * @deprecated `_changeDetectorRef` parameter to be made required.
+               * @breaking-change 11.0.0
+               */
+              private _changeDetectorRef?: ChangeDetectorRef) {
     super(elementRef);
 
     // We need to prefix the SVG reference with the current path, otherwise they won't work
     // in Safari if the page has a `<base>` tag. Note that we need quotes inside the `url()`,
-
-    // because named route URLs can contain parentheses (see #12338). Also we don't use since
-    // we can't tell the difference between whether
-    // the consumer is using the hash location strategy or not, because `Location` normalizes
-    // both `/#/foo/bar` and `/foo/bar` to the same thing.
+    // because named route URLs can contain parentheses (see #12338). Also we don't use `Location`
+    // since we can't tell the difference between whether the consumer is using the hash location
+    // strategy or not, because `Location` normalizes both `/#/foo/bar` and `/foo/bar` to
+    // the same thing.
     const path = location ? location.getPathname().split('#')[0] : '';
     this._rectangleFillValue = `url('${path}#${this.progressbarId}')`;
     this._isNoopAnimation = _animationMode === 'NoopAnimations';
@@ -158,13 +163,21 @@ export class MatProgressBar extends _MatProgressBarBase implements CanColor,
   get value(): number { return this._value; }
   set value(v: number) {
     this._value = clamp(coerceNumberProperty(v) || 0);
+
+    // @breaking-change 11.0.0 Remove null check for _changeDetectorRef.
+    this._changeDetectorRef?.markForCheck();
   }
   private _value: number = 0;
 
   /** Buffer value of the progress bar. Defaults to zero. */
   @Input()
   get bufferValue(): number { return this._bufferValue; }
-  set bufferValue(v: number) { this._bufferValue = clamp(v || 0); }
+  set bufferValue(v: number) {
+    this._bufferValue = clamp(v || 0);
+
+    // @breaking-change 11.0.0 Remove null check for _changeDetectorRef.
+    this._changeDetectorRef?.markForCheck();
+  }
   private _bufferValue: number = 0;
 
   @ViewChild('primaryValueBar') _primaryValueBar: ElementRef;

tools/public_api_guard/material/progress-bar.md

@@ -7,6 +7,7 @@
 import { AbstractConstructor } from '@angular/material/core/common-behaviors/constructor';
 import { AfterViewInit } from '@angular/core';
 import { CanColor } from '@angular/material/core';
+import { ChangeDetectorRef } from '@angular/core';
 import { Constructor } from '@angular/material/core/common-behaviors/constructor';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
@@ -31,7 +32,8 @@ export function MAT_PROGRESS_BAR_LOCATION_FACTORY(): MatProgressBarLocation;
 // @public
 export class MatProgressBar extends _MatProgressBarBase implements CanColor, AfterViewInit, OnDestroy {
     constructor(elementRef: ElementRef, _ngZone: NgZone, _animationMode?: string | undefined,
-    location?: MatProgressBarLocation, defaults?: MatProgressBarDefaultOptions);
+    location?: MatProgressBarLocation, defaults?: MatProgressBarDefaultOptions,
+    _changeDetectorRef?: ChangeDetectorRef | undefined);
     readonly animationEnd: EventEmitter<ProgressAnimationEnd>;
     // (undocumented)
     _animationMode?: string | undefined;
@@ -60,7 +62,7 @@ export class MatProgressBar extends _MatProgressBarBase implements CanColor, Aft
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatProgressBar, "mat-progress-bar", ["matProgressBar"], { "color": "color"; "value": "value"; "bufferValue": "bufferValue"; "mode": "mode"; }, { "animationEnd": "animationEnd"; }, never, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatProgressBar, [null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatProgressBar, [null, null, { optional: true; }, { optional: true; }, { optional: true; }, null]>;
 }
 
 // @public