fixup! fix(material/snack-bar): switch away from animations module

Author: crisbeto

src/material/snack-bar/snack-bar-container.ts

@@ -12,7 +12,6 @@ import {
   ChangeDetectorRef,
   Component,
   ComponentRef,
-  DoCheck,
   ElementRef,
   EmbeddedViewRef,
   inject,
@@ -34,6 +33,9 @@ import {_IdGenerator, AriaLivePoliteness} from '@angular/cdk/a11y';
 import {Platform} from '@angular/cdk/platform';
 import {MatSnackBarConfig} from './snack-bar-config';
 
+const ENTER_ANIMATION = '_mat-snack-bar-enter';
+const EXIT_ANIMATION = '_mat-snack-bar-exit';
+
 /**
  * Internal component that wraps user-provided snack bar content.
  * @docs-private
@@ -54,11 +56,11 @@ import {MatSnackBarConfig} from './snack-bar-config';
     '[class.mat-snack-bar-container-enter]': '_animationState === "visible"',
     '[class.mat-snack-bar-container-exit]': '_animationState === "hidden"',
     '[class.mat-snack-bar-container-animations-enabled]': '!_animationsDisabled',
-    '(animationend)': 'onAnimationEnd($event)',
-    '(animationcancel)': 'onAnimationEnd($event)',
+    '(animationend)': 'onAnimationEnd($event.animationName)',
+    '(animationcancel)': 'onAnimationEnd($event.animationName)',
   },
 })
-export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, OnDestroy {
+export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy {
   private _ngZone = inject(NgZone);
   private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   private _changeDetectorRef = inject(ChangeDetectorRef);
@@ -71,7 +73,6 @@ export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, O
   private _trackedModals = new Set<Element>();
   private _enterFallback: ReturnType<typeof setTimeout> | undefined;
   private _exitFallback: ReturnType<typeof setTimeout> | undefined;
-  private _pendingNoopAnimation: boolean;
 
   /** The number of milliseconds to wait before announcing the snack bar's content. */
   private readonly _announceDelay: number = 150;
@@ -173,11 +174,15 @@ export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, O
   };
 
   /** Handle end of animations, updating the state of the snackbar. */
-  onAnimationEnd(event: AnimationEvent) {
-    if (event.animationName === '_mat-snack-bar-exit') {
+  onAnimationEnd(animationName: string) {
+    if (animationName === EXIT_ANIMATION) {
       this._completeExit();
-    } else if (event.animationName === '_mat-snack-bar-enter') {
-      this._completeEnter();
+    } else if (animationName === ENTER_ANIMATION) {
+      clearTimeout(this._enterFallback);
+      this._ngZone.run(() => {
+        this._onEnter.next();
+        this._onEnter.complete();
+      });
     }
   }
 
@@ -192,10 +197,10 @@ export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, O
       this._screenReaderAnnounce();
 
       if (this._animationsDisabled) {
-        this._pendingNoopAnimation = true;
+        setTimeout(() => this.onAnimationEnd(ENTER_ANIMATION));
       } else {
         clearTimeout(this._enterFallback);
-        this._enterFallback = setTimeout(() => this._completeEnter(), 200);
+        this._enterFallback = setTimeout(() => this.onAnimationEnd(ENTER_ANIMATION), 200);
       }
     }
   }
@@ -221,50 +226,23 @@ export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, O
       clearTimeout(this._announceTimeoutId);
 
       if (this._animationsDisabled) {
-        this._pendingNoopAnimation = true;
+        setTimeout(() => this.onAnimationEnd(EXIT_ANIMATION));
       } else {
         clearTimeout(this._exitFallback);
-        this._exitFallback = setTimeout(() => this._completeExit(), 200);
+        this._exitFallback = setTimeout(() => this.onAnimationEnd(EXIT_ANIMATION), 200);
       }
     });
 
     return this._onExit;
   }
 
-  ngDoCheck(): void {
-    // Aims to mimic the timing of when the snack back was using the animations
-    // module since many internal tests depend on the old timing.
-    if (this._pendingNoopAnimation) {
-      this._pendingNoopAnimation = false;
-      queueMicrotask(() => {
-        if (this._animationState === 'visible') {
-          this._completeEnter();
-        } else {
-          this._completeExit();
-        }
-      });
-    }
-  }
-
   /** Makes sure the exit callbacks have been invoked when the element is destroyed. */
   ngOnDestroy() {
     this._destroyed = true;
     this._clearFromModals();
     this._completeExit();
   }
 
-  private _completeEnter() {
-    clearTimeout(this._enterFallback);
-    this._ngZone.run(() => {
-      this._onEnter.next();
-      this._onEnter.complete();
-    });
-  }
-
-  /**
-   * Removes the element in a microtask. Helps prevent errors where we end up
-   * removing an element which is in the middle of an animation.
-   */
   private _completeExit() {
     clearTimeout(this._exitFallback);
     queueMicrotask(() => {

tools/public_api_guard/material/snack-bar.md

@@ -12,7 +12,6 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/overlay';
 import { Direction } from '@angular/cdk/bidi';
-import { DoCheck } from '@angular/core';
 import { DomPortal } from '@angular/cdk/portal';
 import { ElementRef } from '@angular/core';
 import { EmbeddedViewRef } from '@angular/core';
@@ -94,7 +93,7 @@ export class MatSnackBarConfig<D = any> {
 }
 
 // @public
-export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, OnDestroy {
+export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy {
     constructor(...args: unknown[]);
     // (undocumented)
     protected _animationsDisabled: boolean;
@@ -108,10 +107,8 @@ export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, O
     _label: ElementRef;
     _live: AriaLivePoliteness;
     readonly _liveElementId: string;
-    // (undocumented)
-    ngDoCheck(): void;
     ngOnDestroy(): void;
-    onAnimationEnd(event: AnimationEvent): void;
+    onAnimationEnd(animationName: string): void;
     readonly _onAnnounce: Subject<void>;
     readonly _onEnter: Subject<void>;
     readonly _onExit: Subject<void>;