fix(dialog): clean up open dialogs on destroy (#12835)

Closes all of the open dialogs when `MatDialog` is destroyed.

Author: crisbeto

src/lib/dialog/dialog.spec.ts

@@ -637,6 +637,20 @@ describe('MatDialog', () => {
     expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0);
   }));
 
+  it('should close all of the dialogs when the injectable is destroyed', fakeAsync(() => {
+    dialog.open(PizzaMsg);
+    dialog.open(PizzaMsg);
+    dialog.open(PizzaMsg);
+
+    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(3);
+
+    dialog.ngOnDestroy();
+    viewContainerFixture.detectChanges();
+    flush();
+
+    expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0);
+  }));
+
   it('should allow the consumer to disable closing a dialog on navigation', fakeAsync(() => {
     dialog.open(PizzaMsg);
     dialog.open(PizzaMsg, {closeOnNavigation: false});
@@ -1232,6 +1246,22 @@ describe('MatDialog with a parent MatDialog', () => {
 
     expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
   }));
+
+  it('should not close the parent dialogs when a child is destroyed', fakeAsync(() => {
+    parentDialog.open(PizzaMsg);
+    fixture.detectChanges();
+    flush();
+
+    expect(overlayContainerElement.textContent)
+        .toContain('Pizza', 'Expected a dialog to be opened');
+
+    childDialog.ngOnDestroy();
+    fixture.detectChanges();
+    flush();
+
+    expect(overlayContainerElement.textContent)
+        .toContain('Pizza', 'Expected a dialog to be opened');
+  }));
 });
 
 describe('MatDialog with default options', () => {

src/lib/dialog/dialog.ts

@@ -21,6 +21,7 @@ import {
   Injectable,
   InjectionToken,
   Injector,
+  OnDestroy,
   Optional,
   SkipSelf,
   TemplateRef,
@@ -66,7 +67,7 @@ export const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = {
  * Service to open Material Design modal dialogs.
  */
 @Injectable()
-export class MatDialog {
+export class MatDialog implements OnDestroy {
   private _openDialogsAtThisLevel: MatDialogRef<any>[] = [];
   private readonly _afterAllClosedAtThisLevel = new Subject<void>();
   private readonly _afterOpenedAtThisLevel = new Subject<MatDialogRef<any>>();
@@ -152,15 +153,7 @@ export class MatDialog {
    * Closes all of the currently-open dialogs.
    */
   closeAll(): void {
-    let i = this.openDialogs.length;
-
-    while (i--) {
-      // The `_openDialogs` property isn't updated after close until the rxjs subscription
-      // runs on the next microtask, in addition to modifying the array as we're going
-      // through it. We loop through all of them and call close without assuming that
-      // they'll be removed from the list instantaneously.
-      this.openDialogs[i].close();
-    }
+    this._closeDialogs(this.openDialogs);
   }
 
   /**
@@ -171,6 +164,12 @@ export class MatDialog {
     return this.openDialogs.find(dialog => dialog.id === id);
   }
 
+  ngOnDestroy() {
+    // Only close the dialogs at this level on destroy
+    // since the parent service may still be active.
+    this._closeDialogs(this._openDialogsAtThisLevel);
+  }
+
   /**
    * Creates the overlay into which the dialog will be loaded.
    * @param config The dialog configuration.
@@ -357,7 +356,19 @@ export class MatDialog {
         }
       }
     }
+  }
+
+  /** Closes all of the dialogs in an array. */
+  private _closeDialogs(dialogs: MatDialogRef<any>[]) {
+    let i = dialogs.length;
 
+    while (i--) {
+      // The `_openDialogs` property isn't updated after close until the rxjs subscription
+      // runs on the next microtask, in addition to modifying the array as we're going
+      // through it. We loop through all of them and call close without assuming that
+      // they'll be removed from the list instantaneously.
+      dialogs[i].close();
+    }
   }
 
 }