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';