build: add animations toggle to the dev app (#22669)

Adds a button that allows us to test noop animations without having to make code changes.

Author: crisbeto

src/dev-app/dev-app/dev-app-layout.html

@@ -41,6 +41,9 @@ <h1>Angular Material Demos</h1>
           <button mat-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
             <mat-icon>fullscreen</mat-icon>
           </button>
+          <button mat-button (click)="toggleAnimations()">
+            {{animationsDisabled ? 'Enable' : 'Disable'}} animations
+          </button>
           <button mat-button (click)="isDark = !isDark">
             {{isDark ? 'Light' : 'Dark'}} theme
           </button>

src/dev-app/dev-app/dev-app-layout.ts

@@ -15,6 +15,8 @@ import {DOCUMENT} from '@angular/common';
 
 const isDarkThemeKey = 'ANGULAR_COMPONENTS_DEV_APP_DARK_THEME';
 
+export const ANIMATIONS_STORAGE_KEY = 'ANGULAR_COMPONENTS_ANIMATIONS_DISABLED';
+
 /** Root component for the dev-app demos. */
 @Component({
   selector: 'dev-app-layout',
@@ -111,6 +113,9 @@ export class DevAppLayout {
   /** List of possible global density scale values. */
   densityScales = [0, -1, -2, 'minimum', 'maximum'];
 
+  /** Whether animations are disabled. */
+  animationsDisabled = localStorage.getItem(ANIMATIONS_STORAGE_KEY) === 'true';
+
   constructor(
       private _element: ElementRef<HTMLElement>, public rippleOptions: DevAppRippleOptions,
       @Inject(Directionality) public dir: DevAppDirectionality, cdr: ChangeDetectorRef,
@@ -181,6 +186,10 @@ export class DevAppLayout {
     }
   }
 
+  toggleAnimations() {
+    localStorage.setItem(ANIMATIONS_STORAGE_KEY, (!this.animationsDisabled) + '');
+    location.reload();
+  }
 
   /** Gets the index of the next density scale that can be selected. */
   getNextDensityIndex() {

src/dev-app/main-module.ts

@@ -19,10 +19,15 @@ import {DevAppDirectionality} from './dev-app/dev-app-directionality';
 import {DevAppModule} from './dev-app/dev-app-module';
 import {DEV_APP_ROUTES} from './dev-app/routes';
 import {DevAppRippleOptions} from './dev-app/ripple-options';
+import {ANIMATIONS_STORAGE_KEY} from './dev-app/dev-app-layout';
 
 @NgModule({
   imports: [
-    BrowserAnimationsModule,
+    BrowserAnimationsModule.withConfig({
+      // Note that this doesn't seem to work on ViewEngine, but it's
+      // not a compilation error either so we can live with it.
+      disableAnimations: localStorage.getItem(ANIMATIONS_STORAGE_KEY) === 'true'
+    }),
     BrowserModule,
     DevAppModule,
     HttpClientModule,