feat(dialog): expose current dialog state (#16691)

Exposes whether the dialog is currently open, closed or closing. This is useful when writing components around our dialog.

Fixes #16636.

Author: crisbeto

src/material/dialog/dialog-ref.ts

@@ -20,6 +20,9 @@ import {MatDialogContainer} from './dialog-container';
 // Counter for unique dialog ids.
 let uniqueId = 0;
 
+/** Possible states of the lifecycle of a dialog. */
+export const enum MatDialogState {OPEN, CLOSING, CLOSED}
+
 /**
  * Reference to a dialog opened via the MatDialog service.
  */
@@ -45,6 +48,9 @@ export class MatDialogRef<T, R = any> {
   /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */
   private _closeFallbackTimeout: number;
 
+  /** Current state of the dialog. */
+  private _state = MatDialogState.OPEN;
+
   constructor(
     private _overlayRef: OverlayRef,
     public _containerInstance: MatDialogContainer,
@@ -108,6 +114,7 @@ export class MatDialogRef<T, R = any> {
     .subscribe(event => {
       this._beforeClosed.next(dialogResult);
       this._beforeClosed.complete();
+      this._state = MatDialogState.CLOSED;
       this._overlayRef.detachBackdrop();
 
       // The logic that disposes of the overlay depends on the exit animation completing, however
@@ -121,6 +128,7 @@ export class MatDialogRef<T, R = any> {
     });
 
     this._containerInstance._startExitAnimation();
+    this._state = MatDialogState.CLOSING;
   }
 
   /**
@@ -223,6 +231,11 @@ export class MatDialogRef<T, R = any> {
     return this.beforeClosed();
   }
 
+  /** Gets the current state of the dialog's lifecycle. */
+  getState(): MatDialogState {
+    return this._state;
+  }
+
   /** Fetches the position strategy object from the overlay ref. */
   private _getPositionStrategy(): GlobalPositionStrategy {
     return this._overlayRef.getConfig().positionStrategy as GlobalPositionStrategy;

src/material/dialog/dialog.spec.ts

@@ -34,7 +34,8 @@ import {
   MatDialog,
   MatDialogModule,
   MatDialogRef,
-  MAT_DIALOG_DEFAULT_OPTIONS
+  MAT_DIALOG_DEFAULT_OPTIONS,
+  MatDialogState
 } from './index';
 import {Subject} from 'rxjs';
 
@@ -755,6 +756,19 @@ describe('MatDialog', () => {
       expect(resolver.resolveComponentFactory).toHaveBeenCalled();
     }));
 
+  it('should return the current state of the dialog', fakeAsync(() => {
+    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+
+    expect(dialogRef.getState()).toBe(MatDialogState.OPEN);
+    dialogRef.close();
+    viewContainerFixture.detectChanges();
+
+    expect(dialogRef.getState()).toBe(MatDialogState.CLOSING);
+    flush();
+
+    expect(dialogRef.getState()).toBe(MatDialogState.CLOSED);
+  }));
+
   describe('passing in data', () => {
     it('should be able to pass in data', () => {
       let config = {

tools/public_api_guard/material/dialog.d.ts

@@ -117,12 +117,19 @@ export declare class MatDialogRef<T, R = any> {
     beforeClose(): Observable<R | undefined>;
     beforeClosed(): Observable<R | undefined>;
     close(dialogResult?: R): void;
+    getState(): MatDialogState;
     keydownEvents(): Observable<KeyboardEvent>;
     removePanelClass(classes: string | string[]): this;
     updatePosition(position?: DialogPosition): this;
     updateSize(width?: string, height?: string): this;
 }
 
+export declare const enum MatDialogState {
+    OPEN = 0,
+    CLOSING = 1,
+    CLOSED = 2
+}
+
 export declare class MatDialogTitle implements OnInit {
     id: string;
     constructor(_dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);