fix(progress-spinner): unable to change mode on spinner directive

Currently we have the `mat-spinner` directive which is a shortcut to a `mat-progress-spinner` with `mode="indeterminate"`. Since the spinner inherits all of the inputs from the progress spinner, there's nothing stoping people from changing the mode back to `determinate`, however the element will look half-broken because the host bindings assume that the mode won't change. These changes update the host bindings to allow switching between modes.

Fixes #14511.

Author: crisbeto

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

@@ -22,6 +22,7 @@ describe('MatProgressSpinner', () => {
         ProgressSpinnerCustomDiameter,
         SpinnerWithColor,
         ProgressSpinnerWithStringValues,
+        SpinnerWithMode,
       ],
     }).compileComponents();
   }));
@@ -296,6 +297,14 @@ describe('MatProgressSpinner', () => {
     expect(progressElement.componentInstance.strokeWidth).toBe(7);
   });
 
+  it('should be able to change the mode on a mat-spinner', () => {
+    const fixture = TestBed.createComponent(SpinnerWithMode);
+    fixture.detectChanges();
+
+    const progressElement = fixture.debugElement.query(By.css('mat-spinner')).nativeElement;
+    expect(progressElement.getAttribute('mode')).toBe('determinate');
+  });
+
 });
 
 
@@ -335,3 +344,7 @@ class ProgressSpinnerWithColor { color: string = 'primary'; }
   `
 })
 class ProgressSpinnerWithStringValues { }
+
+@Component({template: '<mat-spinner mode="determinate"></mat-spinner>'})
+class SpinnerWithMode { }
+

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

@@ -278,11 +278,14 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   selector: 'mat-spinner',
   host: {
     'role': 'progressbar',
-    'mode': 'indeterminate',
     'class': 'mat-spinner mat-progress-spinner',
     '[class._mat-animation-noopable]': `_noopAnimations`,
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',
+    '[attr.aria-valuemin]': 'mode === "determinate" ? 0 : null',
+    '[attr.aria-valuemax]': 'mode === "determinate" ? 100 : null',
+    '[attr.aria-valuenow]': 'value',
+    '[attr.mode]': 'mode',
   },
   inputs: ['color'],
   templateUrl: 'progress-spinner.html',