fix(material/snack-bar): Ensure snackbar open animation works with On…

…Push ancestor

The enter animation of the snackbar is not guaranteed to work when there
is an `OnPush` parent because it never calls `markForCheck` when
updating the animation state. Even though it calls `detectChanges`, this
will not refresh the host bindings, which includes the animation.

This change updates the `enter` behavior to also call `markForCheck` to
ensure the host view is eventually refreshed when change detection runs.

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

@@ -191,6 +191,9 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy
   enter(): void {
     if (!this._destroyed) {
       this._animationState = 'visible';
+      // _animationState lives in host bindings and `detectChanges` does not refresh host bindings
+      // so we have to call `markForCheck` to ensure the host view is refreshed eventually.
+      this._changeDetectorRef.markForCheck();
       this._changeDetectorRef.detectChanges();
       this._screenReaderAnnounce();
     }
@@ -205,6 +208,7 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy
       // where multiple snack bars are opened in quick succession (e.g. two consecutive calls to
       // `MatSnackBar.open`).
       this._animationState = 'hidden';
+      this._changeDetectorRef.markForCheck();
 
       // Mark this element with an 'exit' attribute to indicate that the snackbar has
       // been dismissed and will soon be removed from the DOM. This is used by the snackbar

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

@@ -1,12 +1,15 @@
 import {LiveAnnouncer} from '@angular/cdk/a11y';
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {
+  ChangeDetectionStrategy,
   Component,
   Directive,
   Inject,
+  NgZone,
   TemplateRef,
   ViewChild,
   ViewContainerRef,
+  signal,
 } from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -358,7 +361,7 @@ describe('MatSnackBar', () => {
     viewContainerFixture.detectChanges();
     expect(overlayContainerElement.childElementCount).toBeGreaterThan(0);
 
-    viewContainerFixture.componentInstance.childComponentExists = false;
+    viewContainerFixture.componentInstance.childComponentExists.set(false);
     viewContainerFixture.detectChanges();
     flush();
 
@@ -403,6 +406,9 @@ describe('MatSnackBar', () => {
     const dismissCompleteSpy = jasmine.createSpy('dismiss complete spy');
 
     viewContainerFixture.detectChanges();
+
+    const containerElement = document.querySelector('mat-snack-bar-container')!;
+    expect(containerElement.classList).toContain('ng-animating');
     const container1 = snackBarRef.containerInstance as MatSnackBarContainer;
     expect(container1._animationState)
       .withContext(`Expected the animation state would be 'visible'.`)
@@ -1102,14 +1108,15 @@ class DirectiveWithViewContainer {
 
 @Component({
   selector: 'arbitrary-component',
-  template: `@if (childComponentExists) {<dir-with-view-container></dir-with-view-container>}`,
+  template: `@if (childComponentExists()) {<dir-with-view-container></dir-with-view-container>}`,
   standalone: true,
   imports: [DirectiveWithViewContainer],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 class ComponentWithChildViewContainer {
   @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer;
 
-  childComponentExists: boolean = true;
+  childComponentExists = signal(true);
 
   get childViewContainer() {
     return this.childWithViewContainer.viewContainerRef;