refactor(multiple): consolidate logic for disabling animations

Adds a common function we can use to determine whether animations are disabled globally. This reduces duplication and makes it easier to change the logic.

Author: crisbeto

goldens/material/checkbox/index.api.md

@@ -35,8 +35,6 @@ export class MatCheckbox implements AfterViewInit, OnChanges, ControlValueAccess
         indeterminateToChecked: string;
         indeterminateToUnchecked: string;
     };
-    // (undocumented)
-    _animationMode?: "NoopAnimations" | "BrowserAnimations" | null | undefined;
     ariaControls: string;
     ariaDescribedby: string;
     ariaExpanded: boolean;

goldens/material/core/index.api.md

@@ -51,6 +51,9 @@ export class AnimationDurations {
     static EXITING: string;
 }
 
+// @public
+export function _animationsDisabled(): boolean;
+
 // @public
 export function _countGroupLabelsBeforeOption(optionIndex: number, options: QueryList<MatOption>, optionGroups: QueryList<MatOptgroup>): number;
 
@@ -318,7 +321,7 @@ export class MatOptionSelectionChange<T = any> {
 export class MatPseudoCheckbox {
     constructor(...args: unknown[]);
     // (undocumented)
-    _animationMode?: "NoopAnimations" | "BrowserAnimations" | null | undefined;
+    _animationsDisabled: boolean;
     appearance: 'minimal' | 'full';
     disabled: boolean;
     state: MatPseudoCheckboxState;

goldens/material/progress-bar/index.api.md

@@ -25,8 +25,6 @@ export function MAT_PROGRESS_BAR_LOCATION_FACTORY(): MatProgressBarLocation;
 export class MatProgressBar implements AfterViewInit, OnDestroy {
     constructor(...args: unknown[]);
     readonly animationEnd: EventEmitter<ProgressAnimationEnd>;
-    // (undocumented)
-    _animationMode?: "NoopAnimations" | "BrowserAnimations" | null | undefined;
     get bufferValue(): number;
     set bufferValue(v: number);
     get color(): string | null | undefined;

goldens/material/sort/index.api.md

@@ -100,7 +100,7 @@ export interface MatSortDefaultOptions {
 export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewInit {
     constructor(...args: unknown[]);
     // (undocumented)
-    protected _animationModule: "NoopAnimations" | "BrowserAnimations" | null;
+    protected _animationsDisabled: boolean;
     arrowPosition: SortHeaderArrowPosition;
     // (undocumented)
     _columnDef: MatSortHeaderColumnDef | null;

goldens/material/tabs/index.api.md

@@ -70,7 +70,7 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
     constructor(...args: unknown[]);
     _alignInkBarToSelectedTab(): void;
     // (undocumented)
-    _animationMode: "NoopAnimations" | "BrowserAnimations" | null;
+    _animationsDisabled: boolean;
     // (undocumented)
     protected _changeDetectorRef: ChangeDetectorRef;
     _checkPaginationEnabled(): void;
@@ -246,7 +246,7 @@ export class MatTabGroup implements AfterViewInit, AfterContentInit, AfterConten
     get animationDuration(): string;
     set animationDuration(value: string | number);
     // (undocumented)
-    _animationMode: "NoopAnimations" | "BrowserAnimations" | null;
+    _animationsDisabled: boolean;
     ariaLabel: string;
     ariaLabelledby: string;
     // @deprecated

src/dev-app/checkbox/checkbox-demo.html

@@ -255,46 +255,6 @@ <h5>Click action: noop</h5>
         }
     </mat-checkbox>
   </div>
-  <div animationsNoop>
-    <h5>No animations</h5>
-    <mat-checkbox
-        [required]="demoRequired"
-        [labelPosition]="demoLabelAfter ? 'after' : 'before'"
-        [aria-label]="demoLabel"
-        [aria-labelledby]="demoLabelledBy"
-        [color]="demoColor"
-        [disableRipple]="demoDisableRipple"
-        [id]="demoId"
-        [name]="demoName"
-        [value]="demoValue"
-        [checked]="demoChecked"
-        [disabled]="demoDisabled"
-        [indeterminate]="demoIndeterminate"
-        (change)="demoChecked = $event.checked"
-        (indeterminateChange)="demoIndeterminate = $event">
-        @if (!demoHideLabel) {
-          Checkbox w/ [checked] & (change)
-        }
-    </mat-checkbox>
-    <mat-checkbox
-        [required]="demoRequired"
-        [labelPosition]="demoLabelAfter ? 'after' : 'before'"
-        [aria-label]="demoLabel"
-        [aria-labelledby]="demoLabelledBy"
-        [color]="demoColor"
-        [disableRipple]="demoDisableRipple"
-        [id]="demoId"
-        [name]="demoName"
-        [value]="demoValue"
-        [disabled]="demoDisabled"
-        [indeterminate]="demoIndeterminate"
-        [(ngModel)]="demoChecked"
-        (indeterminateChange)="demoIndeterminate = $event">
-        @if (!demoHideLabel) {
-          Checkbox w/ [(ngModel)]
-        }
-    </mat-checkbox>
-  </div>
 </div>
 
 <p>

src/dev-app/checkbox/checkbox-demo.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ANIMATION_MODULE_TYPE, ChangeDetectionStrategy, Component, Directive} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Directive} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule} from '@angular/material/checkbox';
 import {MatPseudoCheckboxModule, ThemePalette} from '@angular/material/core';
@@ -32,12 +32,6 @@ export class ClickActionNoop {}
 })
 export class ClickActionCheck {}
 
-@Directive({
-  selector: '[animationsNoop]',
-  providers: [{provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations'}],
-})
-export class AnimationsNoop {}
-
 @Component({
   selector: 'mat-checkbox-demo-nested-checklist',
   styles: `
@@ -107,7 +101,6 @@ export class MatCheckboxDemoNestedChecklist {
     MatCheckboxDemoNestedChecklist,
     ClickActionNoop,
     ClickActionCheck,
-    AnimationsNoop,
     MatTooltip,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

src/material/autocomplete/autocomplete.ts

@@ -7,7 +7,6 @@
  */
 
 import {
-  ANIMATION_MODULE_TYPE,
   AfterContentInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -27,6 +26,7 @@ import {
   inject,
 } from '@angular/core';
 import {
+  _animationsDisabled,
   MAT_OPTGROUP,
   MAT_OPTION_PARENT_COMPONENT,
   MatOptgroup,
@@ -124,8 +124,7 @@ export class MatAutocomplete implements AfterContentInit, OnDestroy {
   private _changeDetectorRef = inject(ChangeDetectorRef);
   private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   protected _defaults = inject<MatAutocompleteDefaultOptions>(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS);
-  protected _animationsDisabled =
-    inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations';
+  protected _animationsDisabled = _animationsDisabled();
   private _activeOptionChanges = Subscription.EMPTY;
 
   /** Manages active item in option list based on key events. */

src/material/badge/badge.ts

@@ -21,9 +21,8 @@ import {
   OnInit,
   Renderer2,
   ViewEncapsulation,
-  ANIMATION_MODULE_TYPE,
 } from '@angular/core';
-import {ThemePalette} from '../core';
+import {_animationsDisabled, ThemePalette} from '../core';
 import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 /** Allowed position options for matBadgePosition */
@@ -76,7 +75,7 @@ export class MatBadge implements OnInit, OnDestroy {
   private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   private _ariaDescriber = inject(AriaDescriber);
   private _renderer = inject(Renderer2);
-  private _animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
+  private _animationsDisabled = _animationsDisabled();
   private _idGenerator = inject(_IdGenerator);
 
   /**
@@ -240,14 +239,14 @@ export class MatBadge implements OnInit, OnDestroy {
     badgeElement.setAttribute('aria-hidden', 'true');
     badgeElement.classList.add(BADGE_CONTENT_CLASS);
 
-    if (this._animationMode === 'NoopAnimations') {
+    if (this._animationsDisabled) {
       badgeElement.classList.add('_mat-animation-noopable');
     }
 
     this._elementRef.nativeElement.appendChild(badgeElement);
 
     // animate in after insertion
-    if (typeof requestAnimationFrame === 'function' && this._animationMode !== 'NoopAnimations') {
+    if (typeof requestAnimationFrame === 'function' && !this._animationsDisabled) {
       this._ngZone.runOutsideAngular(() => {
         requestAnimationFrame(() => {
           badgeElement.classList.add(activeClass);

src/material/bottom-sheet/bottom-sheet-container.ts

@@ -9,7 +9,6 @@
 import {CdkDialogContainer} from '@angular/cdk/dialog';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 import {
-  ANIMATION_MODULE_TYPE,
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
@@ -19,6 +18,7 @@ import {
 } from '@angular/core';
 import {Subscription} from 'rxjs';
 import {CdkPortalOutlet} from '@angular/cdk/portal';
+import {_animationsDisabled} from '../core';
 
 const ENTER_ANIMATION = '_mat-bottom-sheet-enter';
 const EXIT_ANIMATION = '_mat-bottom-sheet-exit';
@@ -54,8 +54,7 @@ const EXIT_ANIMATION = '_mat-bottom-sheet-exit';
 })
 export class MatBottomSheetContainer extends CdkDialogContainer implements OnDestroy {
   private _breakpointSubscription: Subscription;
-  protected _animationsDisabled =
-    inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations';
+  protected _animationsDisabled = _animationsDisabled();
 
   /** The state of the bottom sheet animations. */
   _animationState: 'void' | 'visible' | 'hidden' = 'void';

src/material/button-toggle/button-toggle.ts

@@ -14,7 +14,6 @@ import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 import {
   AfterContentInit,
   AfterViewInit,
-  ANIMATION_MODULE_TYPE,
   booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -36,7 +35,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {_StructuralStylesLoader, MatPseudoCheckbox, MatRipple} from '../core';
+import {_animationsDisabled, _StructuralStylesLoader, MatPseudoCheckbox, MatRipple} from '../core';
 
 /**
  * @deprecated No longer used.
@@ -577,7 +576,7 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
   private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   private _focusMonitor = inject(FocusMonitor);
   private _idGenerator = inject(_IdGenerator);
-  private _animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
+  private _animationDisabled = _animationsDisabled();
   private _checked = false;
 
   /**
@@ -721,7 +720,7 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     // 1. We don't want the animation to fire on the first render for pre-checked toggles so we
     //    delay adding the class until the view is rendered.
     // 2. We don't want animation if the `NoopAnimationsModule` is provided.
-    if (this._animationMode !== 'NoopAnimations') {
+    if (!this._animationDisabled) {
       this._elementRef.nativeElement.classList.add('mat-button-toggle-animations-enabled');
     }
 

src/material/button/button-base.ts

@@ -9,7 +9,6 @@
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {
   AfterViewInit,
-  ANIMATION_MODULE_TYPE,
   booleanAttribute,
   Directive,
   ElementRef,
@@ -21,7 +20,7 @@ import {
   OnDestroy,
   Renderer2,
 } from '@angular/core';
-import {_StructuralStylesLoader, MatRippleLoader, ThemePalette} from '../core';
+import {_animationsDisabled, _StructuralStylesLoader, MatRippleLoader, ThemePalette} from '../core';
 import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 /**
@@ -62,13 +61,13 @@ function transformTabIndex(value: unknown): number | undefined {
     '[class.mat-mdc-button-disabled]': 'disabled',
     '[class.mat-mdc-button-disabled-interactive]': 'disabledInteractive',
     '[class.mat-unthemed]': '!color',
-    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+    '[class._mat-animation-noopable]': '_animationsDisabled',
   },
 })
 export class MatButtonBase implements AfterViewInit, OnDestroy {
   _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   protected _ngZone = inject(NgZone);
-  protected _animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
+  protected _animationsDisabled = _animationsDisabled();
 
   protected readonly _config = inject(MAT_BUTTON_CONFIG, {optional: true});
   private readonly _focusMonitor = inject(FocusMonitor);

src/material/checkbox/checkbox.ts

@@ -8,7 +8,6 @@
 
 import {_IdGenerator, FocusableOption} from '@angular/cdk/a11y';
 import {
-  ANIMATION_MODULE_TYPE,
   AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -36,7 +35,12 @@ import {
   ValidationErrors,
   Validator,
 } from '@angular/forms';
-import {MatRipple, _MatInternalFormField, _StructuralStylesLoader} from '../core';
+import {
+  MatRipple,
+  _MatInternalFormField,
+  _StructuralStylesLoader,
+  _animationsDisabled,
+} from '../core';
 import {
   MAT_CHECKBOX_DEFAULT_OPTIONS,
   MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY,
@@ -79,7 +83,7 @@ const defaults = MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY();
     '[attr.tabindex]': 'null',
     '[attr.aria-label]': 'null',
     '[attr.aria-labelledby]': 'null',
-    '[class._mat-animation-noopable]': `_animationMode === 'NoopAnimations'`,
+    '[class._mat-animation-noopable]': '_animationsDisabled',
     '[class.mdc-checkbox--disabled]': 'disabled',
     '[id]': 'id',
     // Add classes that users can use to more easily target disabled or checked checkboxes.
@@ -111,7 +115,7 @@ export class MatCheckbox
   _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   private _changeDetectorRef = inject(ChangeDetectorRef);
   private _ngZone = inject(NgZone);
-  _animationMode? = inject(ANIMATION_MODULE_TYPE, {optional: true});
+  private _animationsDisabled = _animationsDisabled();
   private _options = inject<MatCheckboxDefaultOptions>(MAT_CHECKBOX_DEFAULT_OPTIONS, {
     optional: true,
   });
@@ -464,7 +468,7 @@ export class MatCheckbox
     newState: TransitionCheckState,
   ): string {
     // Don't transition if animations are disabled.
-    if (this._animationMode === 'NoopAnimations') {
+    if (this._animationsDisabled) {
       return '';
     }
 

src/material/chips/chip.ts

@@ -11,7 +11,6 @@ import {BACKSPACE, DELETE} from '@angular/cdk/keycodes';
 import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 import {DOCUMENT} from '@angular/common';
 import {
-  ANIMATION_MODULE_TYPE,
   AfterContentInit,
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -39,6 +38,7 @@ import {
   MatRippleLoader,
   RippleGlobalOptions,
   _StructuralStylesLoader,
+  _animationsDisabled,
 } from '../core';
 import {Subject, Subscription, merge} from 'rxjs';
 import {MatChipAction} from './chip-action';
@@ -120,7 +120,7 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   private _actionChanges: Subscription | undefined;
 
   /** Whether animations for the chip are enabled. */
-  _animationsDisabled: boolean;
+  _animationsDisabled = _animationsDisabled();
 
   /** All avatars present in the chip. */
   @ContentChildren(MAT_CHIP_AVATAR, {descendants: true})
@@ -245,8 +245,6 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
     const styleLoader = inject(_CdkPrivateStyleLoader);
     styleLoader.load(_StructuralStylesLoader);
     styleLoader.load(_VisuallyHiddenLoader);
-    const animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
-    this._animationsDisabled = animationMode === 'NoopAnimations';
     this._monitorFocus();
 
     this._rippleLoader?.configureRipple(this._elementRef.nativeElement, {