feat(material/core): introduce custom token for controlling animations (#30749)

Even though Material is currently decoupled from the animations module, users still need to import the `NoopAnimationsModule` to disable them.

These changes introduce a custom token so that users don't have to depend on the animations-related packages at all.

Author: crisbeto

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<AnimationsConfig>;
+
 // @public @deprecated
 export const MATERIAL_SANITY_CHECKS: InjectionToken<SanityChecks>;
 

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},

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<AnimationsConfig>('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';
 }