fix(material-experimental/mdc-dialog): afterClosed being run outside of NgZone (#21702)

Fixes that all of the callbacks tied to animations within the MDC-based dialog were being run
outside of the `NgZone`.

Fixes #21696.

Author: crisbeto

src/material-experimental/mdc-dialog/dialog-container.ts

@@ -14,7 +14,6 @@ import {
   Component,
   ElementRef,
   Inject,
-  NgZone,
   OnDestroy,
   Optional,
   ViewEncapsulation
@@ -66,7 +65,6 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
       changeDetectorRef: ChangeDetectorRef,
       @Optional() @Inject(DOCUMENT) document: any,
       config: MatDialogConfig,
-      private _ngZone: NgZone,
       @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string,
       focusMonitor?: FocusMonitor) {
     super(elementRef, focusTrapFactory, changeDetectorRef, document, config, focusMonitor);
@@ -180,6 +178,9 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
     if (this._animationTimer !== null) {
       clearTimeout(this._animationTimer);
     }
-    this._ngZone.runOutsideAngular(() => this._animationTimer = setTimeout(callback, duration));
+
+    // Note that we want this timer to run inside the NgZone, because we want
+    // the related events like `afterClosed` to be inside the zone as well.
+    this._animationTimer = setTimeout(callback, duration);
   }
 }

src/material-experimental/mdc-dialog/dialog.spec.ts

@@ -20,6 +20,7 @@ import {
   Inject,
   Injector,
   NgModule,
+  NgZone,
   TemplateRef,
   ViewChild,
   ViewContainerRef
@@ -201,6 +202,23 @@ describe('MDC-based MatDialog', () => {
        expect(overlayContainerElement.querySelector('mat-mdc-dialog-container')).toBeNull();
      }));
 
+  it('should invoke the afterClosed callback inside the NgZone',
+    fakeAsync(inject([NgZone], (zone: NgZone) => {
+      const dialogRef = dialog.open(PizzaMsg, { viewContainerRef: testViewContainerRef });
+      const afterCloseCallback = jasmine.createSpy('afterClose callback');
+
+      dialogRef.afterClosed().subscribe(() => {
+        afterCloseCallback(NgZone.isInAngularZone());
+      });
+      zone.run(() => {
+        dialogRef.close();
+        viewContainerFixture.detectChanges();
+        flush();
+      });
+
+      expect(afterCloseCallback).toHaveBeenCalledWith(true);
+    })));
+
   it('should dispose of dialog if view container is destroyed while animating', fakeAsync(() => {
        const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
 

src/material/dialog/dialog.spec.ts

@@ -18,7 +18,8 @@ import {
   TemplateRef,
   ViewChild,
   ViewContainerRef,
-  ComponentFactoryResolver
+  ComponentFactoryResolver,
+  NgZone
 } from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -204,6 +205,23 @@ describe('MatDialog', () => {
     expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
   }));
 
+  it('should invoke the afterClosed callback inside the NgZone',
+    fakeAsync(inject([NgZone], (zone: NgZone) => {
+      const dialogRef = dialog.open(PizzaMsg, { viewContainerRef: testViewContainerRef });
+      const afterCloseCallback = jasmine.createSpy('afterClose callback');
+
+      dialogRef.afterClosed().subscribe(() => {
+        afterCloseCallback(NgZone.isInAngularZone());
+      });
+      zone.run(() => {
+        dialogRef.close();
+        viewContainerFixture.detectChanges();
+        flush();
+      });
+
+      expect(afterCloseCallback).toHaveBeenCalledWith(true);
+    })));
+
   it('should dispose of dialog if view container is destroyed while animating', fakeAsync(() => {
     const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});