refactor(dialog): normalize event names (#11549)

Author: crisbeto

src/cdk-experimental/dialog/dialog-ref.ts

@@ -44,7 +44,7 @@ export class DialogRef<T, R = any> {
       });
     }
 
-    this.beforeClose().subscribe(() => {
+    this.beforeClosed().subscribe(() => {
       this._overlayRef.detachBackdrop();
     });
 
@@ -127,17 +127,17 @@ export class DialogRef<T, R = any> {
   }
 
   /** Gets an observable that emits when dialog begins opening. */
-  beforeOpen(): Observable<void> {
+  beforeOpened(): Observable<void> {
     return this._containerInstance._beforeEnter.asObservable();
   }
 
   /** Gets an observable that emits when dialog is finished opening. */
-  afterOpen(): Observable<void> {
+  afterOpened(): Observable<void> {
     return this._containerInstance._afterEnter.asObservable();
   }
 
   /** Gets an observable that emits when dialog begins closing. */
-  beforeClose(): Observable<R | undefined> {
+  beforeClosed(): Observable<R | undefined> {
     return this._containerInstance._beforeExit.pipe(map(() => this._result));
   }
 

src/cdk-experimental/dialog/dialog.spec.ts

@@ -108,7 +108,7 @@ describe('Dialog', () => {
     const dialogRef = dialog.openFromComponent(PizzaMsg, {viewContainerRef: testViewContainerRef});
     const spy = jasmine.createSpy('afterOpen spy');
 
-    dialogRef.afterOpen().subscribe(spy);
+    dialogRef.afterOpened().subscribe(spy);
 
     viewContainerFixture.detectChanges();
 
@@ -203,7 +203,7 @@ describe('Dialog', () => {
           .not.toBeNull('dialog container exists when beforeClose is called');
     });
 
-    dialogRef.beforeClose().subscribe(beforeCloseHandler);
+    dialogRef.beforeClosed().subscribe(beforeCloseHandler);
     dialogRef.close('Bulbasaur');
     viewContainerFixture.detectChanges();
     flush();
@@ -298,7 +298,7 @@ describe('Dialog', () => {
   }));
 
   it('should notify the observers if a dialog has been opened', () => {
-    dialog.afterOpen.subscribe(ref => {
+    dialog.afterOpened.subscribe(ref => {
       expect(dialog.openFromComponent(PizzaMsg, {
         viewContainerRef: testViewContainerRef
       })).toBe(ref);

src/cdk-experimental/dialog/dialog.ts

@@ -53,10 +53,10 @@ export class Dialog {
       this._afterAllClosed : this._afterAllClosed.pipe(startWith(undefined)));
 
   /** Stream that emits when a dialog is opened. */
-  get afterOpen(): Subject<DialogRef<any>> {
-    return this._parentDialog ? this._parentDialog.afterOpen : this._afterOpen;
+  get afterOpened(): Subject<DialogRef<any>> {
+    return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpened;
   }
-  _afterOpen: Subject<DialogRef<any>> = new Subject();
+  _afterOpened: Subject<DialogRef<any>> = new Subject();
 
   /** Stream that emits when a dialog is opened. */
   get openDialogs(): DialogRef<any>[] {
@@ -130,14 +130,17 @@ export class Dialog {
   private registerDialogRef(dialogRef: DialogRef<any>): void {
     this.openDialogs.push(dialogRef);
 
-    let dialogOpenSub = dialogRef.afterOpen().subscribe(() => {
-      this.afterOpen.next(dialogRef);
+    const dialogOpenSub = dialogRef.afterOpened().subscribe(() => {
+      this.afterOpened.next(dialogRef);
       dialogOpenSub.unsubscribe();
     });
 
-    let dialogCloseSub = dialogRef.afterClosed().subscribe(() => {
-      let dialogIdx = this._openDialogs.indexOf(dialogRef);
-      if (dialogIdx !== -1) { this._openDialogs.splice(dialogIdx, 1); }
+    const dialogCloseSub = dialogRef.afterClosed().subscribe(() => {
+      let dialogIndex = this._openDialogs.indexOf(dialogRef);
+
+      if (dialogIndex > -1) {
+        this._openDialogs.splice(dialogIndex, 1);
+      }
 
       if (!this._openDialogs.length) {
         this._afterAllClosedBase.next();

src/demo-app/dialog/dialog-demo.ts

@@ -66,7 +66,7 @@ export class DialogDemo {
   openJazz() {
     this.dialogRef = this.dialog.open(JazzDialog, this.config);
 
-    this.dialogRef.beforeClose().subscribe((result: string) => {
+    this.dialogRef.beforeClosed().subscribe((result: string) => {
       this.lastBeforeCloseResult = result;
     });
     this.dialogRef.afterClosed().subscribe((result: string) => {

src/lib/dialog/dialog-ref.ts

@@ -31,13 +31,13 @@ export class MatDialogRef<T, R = any> {
   disableClose: boolean | undefined = this._containerInstance._config.disableClose;
 
   /** Subject for notifying the user that the dialog has finished opening. */
-  private readonly _afterOpen = new Subject<void>();
+  private readonly _afterOpened = new Subject<void>();
 
   /** Subject for notifying the user that the dialog has finished closing. */
   private readonly _afterClosed = new Subject<R | undefined>();
 
   /** Subject for notifying the user that the dialog has started closing. */
-  private readonly _beforeClose = new Subject<R | undefined>();
+  private readonly _beforeClosed = new Subject<R | undefined>();
 
   /** Result to be passed to afterClosed. */
   private _result: R | undefined;
@@ -60,8 +60,8 @@ export class MatDialogRef<T, R = any> {
       take(1)
     )
     .subscribe(() => {
-      this._afterOpen.next();
-      this._afterOpen.complete();
+      this._afterOpened.next();
+      this._afterOpened.complete();
     });
 
     // Dispose overlay when closing animation is complete
@@ -71,8 +71,8 @@ export class MatDialogRef<T, R = any> {
     ).subscribe(() => this._overlayRef.dispose());
 
     _overlayRef.detachments().subscribe(() => {
-      this._beforeClose.next(this._result);
-      this._beforeClose.complete();
+      this._beforeClosed.next(this._result);
+      this._beforeClosed.complete();
       this._locationChanges.unsubscribe();
       this._afterClosed.next(this._result);
       this._afterClosed.complete();
@@ -109,8 +109,8 @@ export class MatDialogRef<T, R = any> {
       take(1)
     )
     .subscribe(() => {
-      this._beforeClose.next(dialogResult);
-      this._beforeClose.complete();
+      this._beforeClosed.next(dialogResult);
+      this._beforeClosed.complete();
       this._overlayRef.detachBackdrop();
     });
 
@@ -120,8 +120,8 @@ export class MatDialogRef<T, R = any> {
   /**
    * Gets an observable that is notified when the dialog is finished opening.
    */
-  afterOpen(): Observable<void> {
-    return this._afterOpen.asObservable();
+  afterOpened(): Observable<void> {
+    return this._afterOpened.asObservable();
   }
 
   /**
@@ -134,8 +134,8 @@ export class MatDialogRef<T, R = any> {
   /**
    * Gets an observable that is notified when the dialog has started closing.
    */
-  beforeClose(): Observable<R | undefined> {
-    return this._beforeClose.asObservable();
+  beforeClosed(): Observable<R | undefined> {
+    return this._beforeClosed.asObservable();
   }
 
   /**
@@ -187,6 +187,24 @@ export class MatDialogRef<T, R = any> {
     return this;
   }
 
+  /**
+   * Gets an observable that is notified when the dialog is finished opening.
+   * @deprecated Use `afterOpened` instead.
+   * @deletion-target 8.0.0
+   */
+  afterOpen(): Observable<void> {
+    return this.afterOpened();
+  }
+
+  /**
+   * Gets an observable that is notified when the dialog has started closing.
+   * @deprecated Use `beforeClosed` instead.
+   * @deletion-target 8.0.0
+   */
+  beforeClose(): Observable<R | undefined> {
+    return this.beforeClosed();
+  }
+
   /** Fetches the position strategy object from the overlay ref. */
   private _getPositionStrategy(): GlobalPositionStrategy {
     return this._overlayRef.getConfig().positionStrategy as GlobalPositionStrategy;

src/lib/dialog/dialog.spec.ts

@@ -122,7 +122,7 @@ describe('MatDialog', () => {
     const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
     const spy = jasmine.createSpy('afterOpen spy');
 
-    dialogRef.afterOpen().subscribe(spy);
+    dialogRef.afterOpened().subscribe(spy);
 
     viewContainerFixture.detectChanges();
 
@@ -225,7 +225,7 @@ describe('MatDialog', () => {
           .not.toBeNull('dialog container exists when beforeClose is called');
     });
 
-    dialogRef.beforeClose().subscribe(beforeCloseHandler);
+    dialogRef.beforeClosed().subscribe(beforeCloseHandler);
     dialogRef.close('Bulbasaur');
     viewContainerFixture.detectChanges();
     flush();
@@ -328,7 +328,7 @@ describe('MatDialog', () => {
   }));
 
   it('should notify the observers if a dialog has been opened', () => {
-    dialog.afterOpen.subscribe(ref => {
+    dialog.afterOpened.subscribe(ref => {
       expect(dialog.open(PizzaMsg, {
         viewContainerRef: testViewContainerRef
       })).toBe(ref);

src/lib/dialog/dialog.ts

@@ -69,7 +69,7 @@ export const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = {
 export class MatDialog {
   private _openDialogsAtThisLevel: MatDialogRef<any>[] = [];
   private readonly _afterAllClosedAtThisLevel = new Subject<void>();
-  private readonly _afterOpenAtThisLevel = new Subject<MatDialogRef<any>>();
+  private readonly _afterOpenedAtThisLevel = new Subject<MatDialogRef<any>>();
   private _ariaHiddenElements = new Map<Element, string|null>();
 
   /** Keeps track of the currently-open dialogs. */
@@ -78,8 +78,17 @@ export class MatDialog {
   }
 
   /** Stream that emits when a dialog has been opened. */
+  get afterOpened(): Subject<MatDialogRef<any>> {
+    return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel;
+  }
+
+  /**
+   * Stream that emits when a dialog has been opened.
+   * @deprecated Use `afterOpened` instead.
+   * @deletion-target 8.0.0
+   */
   get afterOpen(): Subject<MatDialogRef<any>> {
-    return this._parentDialog ? this._parentDialog.afterOpen : this._afterOpenAtThisLevel;
+    return this.afterOpened;
   }
 
   get _afterAllClosed() {
@@ -134,7 +143,7 @@ export class MatDialog {
 
     this.openDialogs.push(dialogRef);
     dialogRef.afterClosed().subscribe(() => this._removeOpenDialog(dialogRef));
-    this.afterOpen.next(dialogRef);
+    this.afterOpened.next(dialogRef);
 
     return dialogRef;
   }

src/lib/select/select.ts

@@ -445,8 +445,8 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
       .pipe(take(1), switchMap(() => this.optionSelectionChanges));
   });
 
-   /** Event emitted when the select panel has been toggled. */
-   @Output() readonly openedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  /** Event emitted when the select panel has been toggled. */
+  @Output() readonly openedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   /** Event emitted when the select has been opened. */
   @Output('opened') readonly _openedStream: Observable<void> =