diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
index 13a4f4ace329..bb5109de6d93 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
@@ -24,6 +24,7 @@ describe('MDC-based MatProgressSpinner', () => {
ProgressSpinnerWithStringValues,
IndeterminateSpinnerInShadowDom,
IndeterminateSpinnerInShadowDomWithNgIf,
+ SpinnerWithMode,
],
}).compileComponents();
}),
@@ -397,6 +398,14 @@ describe('MDC-based MatProgressSpinner', () => {
expect(children.length).toBeGreaterThan(0);
expect(children.every(child => child.getAttribute('aria-hidden') === 'true')).toBe(true);
});
+
+ 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');
+ });
});
@Component({template: ''})
@@ -470,3 +479,6 @@ class IndeterminateSpinnerInShadowDomWithNgIf {
diameter: number;
}
+
+@Component({template: ''})
+class SpinnerWithMode {}
diff --git a/src/material/progress-spinner/progress-spinner-module.ts b/src/material/progress-spinner/progress-spinner-module.ts
index 50e2fddd90ef..ad512e4d384e 100644
--- a/src/material/progress-spinner/progress-spinner-module.ts
+++ b/src/material/progress-spinner/progress-spinner-module.ts
@@ -8,11 +8,11 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {MatCommonModule} from '@angular/material/core';
-import {MatProgressSpinner, MatSpinner} from './progress-spinner';
+import {MatProgressSpinner} from './progress-spinner';
@NgModule({
imports: [MatCommonModule, CommonModule],
- exports: [MatProgressSpinner, MatSpinner, MatCommonModule],
- declarations: [MatProgressSpinner, MatSpinner],
+ exports: [MatProgressSpinner, MatCommonModule],
+ declarations: [MatProgressSpinner],
})
export class MatProgressSpinnerModule {}
diff --git a/src/material/progress-spinner/progress-spinner.spec.ts b/src/material/progress-spinner/progress-spinner.spec.ts
index 55ad308468ae..db4d6c8d2f01 100644
--- a/src/material/progress-spinner/progress-spinner.spec.ts
+++ b/src/material/progress-spinner/progress-spinner.spec.ts
@@ -26,6 +26,7 @@ describe('MatProgressSpinner', () => {
ProgressSpinnerWithStringValues,
IndeterminateSpinnerInShadowDom,
IndeterminateSpinnerInShadowDomWithNgIf,
+ SpinnerWithMode,
],
}).compileComponents();
}),
@@ -540,6 +541,14 @@ describe('MatProgressSpinner', () => {
expect(children.length).toBeGreaterThan(0);
expect(children.every(child => child.getAttribute('aria-hidden') === 'true')).toBe(true);
});
+
+ 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');
+ });
});
@Component({template: ''})
@@ -616,3 +625,6 @@ class IndeterminateSpinnerInShadowDomWithNgIf {
diameter: number;
}
+
+@Component({template: ''})
+class SpinnerWithMode {}
diff --git a/src/material/progress-spinner/progress-spinner.ts b/src/material/progress-spinner/progress-spinner.ts
index 08367c7ac693..742da41469d6 100644
--- a/src/material/progress-spinner/progress-spinner.ts
+++ b/src/material/progress-spinner/progress-spinner.ts
@@ -111,11 +111,12 @@ const INDETERMINATE_ANIMATION_TEMPLATE = `
* `` component.
*/
@Component({
- selector: 'mat-progress-spinner',
+ selector: 'mat-progress-spinner, mat-spinner',
exportAs: 'matProgressSpinner',
host: {
'role': 'progressbar',
- 'class': 'mat-progress-spinner',
+ // `mat-spinner` is here for backward compatibility.
+ 'class': 'mat-progress-spinner mat-spinner',
// set tab index to -1 so screen readers will read the aria-label
// Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox
'tabindex': '-1',
@@ -229,6 +230,10 @@ export class MatProgressSpinner
this._noopAnimations =
animationMode === 'NoopAnimations' && !!defaults && !defaults._forceAnimations;
+ if (elementRef.nativeElement.nodeName.toLowerCase() === 'mat-spinner') {
+ this.mode = 'indeterminate';
+ }
+
if (defaults) {
if (defaults.color) {
this.color = this.defaultColor = defaults.color;
@@ -356,56 +361,3 @@ export class MatProgressSpinner
return this.diameter.toString().replace('.', '_');
}
}
-
-/**
- * `` component.
- *
- * This is a component definition to be used as a convenience reference to create an
- * indeterminate `` instance.
- */
-@Component({
- 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',
- },
- inputs: ['color'],
- templateUrl: 'progress-spinner.html',
- styleUrls: ['progress-spinner.css'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- encapsulation: ViewEncapsulation.None,
-})
-export class MatSpinner extends MatProgressSpinner {
- constructor(
- elementRef: ElementRef,
- platform: Platform,
- @Optional() @Inject(DOCUMENT) document: any,
- @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,
- @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
- defaults?: MatProgressSpinnerDefaultOptions,
- /**
- * @deprecated `changeDetectorRef`, `viewportRuler` and `ngZone`
- * parameters to become required.
- * @breaking-change 14.0.0
- */
- changeDetectorRef?: ChangeDetectorRef,
- viewportRuler?: ViewportRuler,
- ngZone?: NgZone,
- ) {
- super(
- elementRef,
- platform,
- document,
- animationMode,
- defaults,
- changeDetectorRef,
- viewportRuler,
- ngZone,
- );
- this.mode = 'indeterminate';
- }
-}
diff --git a/src/material/progress-spinner/public-api.ts b/src/material/progress-spinner/public-api.ts
index b67d2c313a1b..71ebfc725c82 100644
--- a/src/material/progress-spinner/public-api.ts
+++ b/src/material/progress-spinner/public-api.ts
@@ -6,12 +6,21 @@
* found in the LICENSE file at https://angular.io/license
*/
+import {MatProgressSpinner} from './progress-spinner';
+
export * from './progress-spinner-module';
export {
MatProgressSpinner,
- MatSpinner,
MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,
ProgressSpinnerMode,
MatProgressSpinnerDefaultOptions,
MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY,
} from './progress-spinner';
+
+/**
+ * @deprecated Import `MatProgressSpinner` instead. Note that the
+ * `mat-spinner` selector isn't deprecated.
+ * @breaking-change 8.0.0
+ */
+// tslint:disable-next-line:variable-name
+export const MatSpinner = MatProgressSpinner;
diff --git a/tools/public_api_guard/material/progress-spinner.md b/tools/public_api_guard/material/progress-spinner.md
index 91edb5c3c9fc..c2fefd4486d0 100644
--- a/tools/public_api_guard/material/progress-spinner.md
+++ b/tools/public_api_guard/material/progress-spinner.md
@@ -51,7 +51,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerBase implements OnIni
get value(): number;
set value(newValue: NumberInput);
// (undocumented)
- static ɵcmp: i0.ɵɵComponentDeclaration;
+ static ɵcmp: i0.ɵɵComponentDeclaration;
// (undocumented)
static ɵfac: i0.ɵɵFactoryDeclaration;
}
@@ -71,18 +71,11 @@ export class MatProgressSpinnerModule {
// (undocumented)
static ɵinj: i0.ɵɵInjectorDeclaration;
// (undocumented)
- static ɵmod: i0.ɵɵNgModuleDeclaration;
+ static ɵmod: i0.ɵɵNgModuleDeclaration;
}
-// @public
-export class MatSpinner extends MatProgressSpinner {
- constructor(elementRef: ElementRef, platform: Platform, document: any, animationMode: string, defaults?: MatProgressSpinnerDefaultOptions,
- changeDetectorRef?: ChangeDetectorRef, viewportRuler?: ViewportRuler, ngZone?: NgZone);
- // (undocumented)
- static ɵcmp: i0.ɵɵComponentDeclaration;
- // (undocumented)
- static ɵfac: i0.ɵɵFactoryDeclaration;
-}
+// @public @deprecated (undocumented)
+export const MatSpinner: typeof MatProgressSpinner;
// @public
export type ProgressSpinnerMode = 'determinate' | 'indeterminate';