diff --git a/goldens/material/core/index.api.md b/goldens/material/core/index.api.md index a94fe4237e4f..45dace77c856 100644 --- a/goldens/material/core/index.api.md +++ b/goldens/material/core/index.api.md @@ -51,6 +51,11 @@ export class AnimationDurations { static EXITING: string; } +// @public +export interface AnimationsConfig { + animationsDisabled: boolean; +} + // @public export function _animationsDisabled(): boolean; @@ -189,6 +194,9 @@ export type MatDateFormats = { }; }; +// @public +export const MATERIAL_ANIMATIONS: InjectionToken; + // @public @deprecated export const MATERIAL_SANITY_CHECKS: InjectionToken; diff --git a/src/dev-app/main.ts b/src/dev-app/main.ts index 549be6b52489..f90ec3b057d5 100644 --- a/src/dev-app/main.ts +++ b/src/dev-app/main.ts @@ -11,18 +11,21 @@ import '@angular/localize/init'; import {provideHttpClient} from '@angular/common/http'; import { - importProvidersFrom, provideExperimentalZonelessChangeDetection, // tslint:disable-next-line:no-zone-dependencies -- Allow manual testing of dev-app with zones provideZoneChangeDetection, } from '@angular/core'; import {bootstrapApplication} from '@angular/platform-browser'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {RouterModule} from '@angular/router'; +import {provideRouter} from '@angular/router'; import {Directionality} from '@angular/cdk/bidi'; import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay'; -import {MAT_RIPPLE_GLOBAL_OPTIONS, provideNativeDateAdapter} from '@angular/material/core'; +import { + MAT_RIPPLE_GLOBAL_OPTIONS, + MATERIAL_ANIMATIONS, + provideNativeDateAdapter, + AnimationsConfig, +} from '@angular/material/core'; import {DevApp} from './dev-app'; import {DevAppDirectionality} from './dev-app/dev-app-directionality'; @@ -46,14 +49,15 @@ document.head.appendChild(theme); function bootstrap(): void { bootstrapApplication(DevApp, { providers: [ - importProvidersFrom( - BrowserAnimationsModule.withConfig({ - disableAnimations: !cachedAppState.animations, - }), - RouterModule.forRoot(DEV_APP_ROUTES), - ), + provideRouter(DEV_APP_ROUTES), provideNativeDateAdapter(), provideHttpClient(), + { + provide: MATERIAL_ANIMATIONS, + useValue: { + animationsDisabled: !cachedAppState.animations, + } as AnimationsConfig, + }, {provide: OverlayContainer, useClass: FullscreenOverlayContainer}, {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: DevAppRippleOptions}, {provide: Directionality, useClass: DevAppDirectionality}, diff --git a/src/material/core/animation/animation.ts b/src/material/core/animation/animation.ts index 02c15a20e06c..315fbfe97ef6 100644 --- a/src/material/core/animation/animation.ts +++ b/src/material/core/animation/animation.ts @@ -6,7 +6,16 @@ * found in the LICENSE file at https://angular.dev/license */ -import {ANIMATION_MODULE_TYPE, inject} from '@angular/core'; +import {ANIMATION_MODULE_TYPE, inject, InjectionToken} from '@angular/core'; + +/** Object used to configure the animation in Angular Material. */ +export interface AnimationsConfig { + /** Whether all animations should be disabled. */ + animationsDisabled: boolean; +} + +/** Injection token used to configure the animations in Angular Material. */ +export const MATERIAL_ANIMATIONS = new InjectionToken('MATERIAL_ANIMATIONS'); /** * @deprecated No longer used, will be removed. @@ -36,5 +45,11 @@ export class AnimationDurations { * @docs-private */ export function _animationsDisabled(): boolean { + const customToken = inject(MATERIAL_ANIMATIONS, {optional: true}); + + if (customToken) { + return customToken.animationsDisabled; + } + return inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations'; }