feat(menu): add new lifeycle events

angular/BREAKING.md

@@ -834,6 +834,12 @@ The `content` prop has been renamed to `contentId` and it points to the DOM id o
 <ion-nav #nav></ion-nav>
 ```
 
+### Events renamed
+
+- `ionClose` was renamed to `ionDidClose`
+- `ionOpen` was renamed to `ionDidOpen`
+
+
 **New Usage Example:**
 
 ```html

angular/src/directives/proxies.ts

@@ -459,15 +459,17 @@ export class ListHeader {
 export declare interface Menu extends StencilComponents<'IonMenu'> {}
 @Component({ selector: 'ion-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeGesture', 'maxEdgeStart'] })
 export class Menu {
-  ionOpen: EventEmitter<CustomEvent>;
-  ionClose: EventEmitter<CustomEvent>;
+  ionWillOpen: EventEmitter<CustomEvent>;
+  ionWillClose: EventEmitter<CustomEvent>;
+  ionDidOpen: EventEmitter<CustomEvent>;
+  ionDidClose: EventEmitter<CustomEvent>;
   ionMenuChange: EventEmitter<CustomEvent>;
 
   constructor(r: ElementRef) {
     const el = r.nativeElement;
     proxyMethods(this, el, ['isOpen', 'isActive', 'open', 'close', 'toggle', 'setOpen']);
     proxyInputs(this, el, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeGesture', 'maxEdgeStart']);
-    proxyOutputs(this, el, ['ionOpen', 'ionClose', 'ionMenuChange']);
+    proxyOutputs(this, el, ['ionWillOpen', 'ionWillClose', 'ionDidOpen', 'ionDidClose', 'ionMenuChange']);
   }
 }
 

core/src/components.d.ts

@@ -2565,15 +2565,23 @@ export namespace Components {
     /**
     * Emitted when the menu is closed.
     */
-    'onIonClose'?: (event: CustomEvent<void>) => void;
+    'onIonDidClose'?: (event: CustomEvent<void>) => void;
+    /**
+    * Emitted when the menu is open.
+    */
+    'onIonDidOpen'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the menu state is changed.
     */
     'onIonMenuChange'?: (event: CustomEvent<MenuChangeEventDetail>) => void;
     /**
-    * Emitted when the menu is open.
+    * Emitted when the menu is about to be closed.
+    */
+    'onIonWillClose'?: (event: CustomEvent<void>) => void;
+    /**
+    * Emitted when the menu is about to be opened.
     */
-    'onIonOpen'?: (event: CustomEvent<void>) => void;
+    'onIonWillOpen'?: (event: CustomEvent<void>) => void;
     /**
     * Which side of the view the menu should be placed. Default `"start"`.
     */

core/src/components/menu/menu.tsx

@@ -116,15 +116,24 @@ export class Menu implements ComponentInterface, MenuI {
    */
   @Prop() maxEdgeStart = 50;
 
+  /**
+   * Emitted when the menu is about to be opened.
+   */
+  @Event() ionWillOpen!: EventEmitter<void>;
+
+  /**
+   * Emitted when the menu is about to be closed.
+   */
+  @Event() ionWillClose!: EventEmitter<void>;
   /**
    * Emitted when the menu is open.
    */
-  @Event() ionOpen!: EventEmitter<void>;
+  @Event() ionDidOpen!: EventEmitter<void>;
 
   /**
    * Emitted when the menu is closed.
    */
-  @Event() ionClose!: EventEmitter<void>;
+  @Event() ionDidClose!: EventEmitter<void>;
 
   /**
    * Emitted when the menu state is changed.
@@ -254,7 +263,7 @@ export class Menu implements ComponentInterface, MenuI {
       return this._isOpen;
     }
 
-    this.beforeAnimation();
+    this.beforeAnimation(shouldOpen);
     await this.loadAnimation();
     await this.startAnimation(shouldOpen, animated);
     this.afterAnimation(shouldOpen);
@@ -316,7 +325,7 @@ export class Menu implements ComponentInterface, MenuI {
   }
 
   private onWillStart(): Promise<void> {
-    this.beforeAnimation();
+    this.beforeAnimation(!this._isOpen);
     return this.loadAnimation();
   }
 
@@ -385,7 +394,7 @@ export class Menu implements ComponentInterface, MenuI {
       .progressEnd(shouldComplete, stepValue, realDur);
   }
 
-  private beforeAnimation() {
+  private beforeAnimation(shouldOpen: boolean) {
     assert(!this.isAnimating, '_before() should not be called while animating');
 
     // this places the menu into the correct location before it animates in
@@ -396,6 +405,11 @@ export class Menu implements ComponentInterface, MenuI {
     }
     this.blocker.block();
     this.isAnimating = true;
+    if (shouldOpen) {
+      this.ionWillOpen.emit();
+    } else {
+      this.ionWillClose.emit();
+    }
   }
 
   private afterAnimation(isOpen: boolean) {
@@ -421,7 +435,7 @@ export class Menu implements ComponentInterface, MenuI {
       }
 
       // emit open event
-      this.ionOpen.emit();
+      this.ionDidOpen.emit();
     } else {
       // remove css classes
       this.el.classList.remove(SHOW_MENU);
@@ -433,7 +447,7 @@ export class Menu implements ComponentInterface, MenuI {
       }
 
       // emit close event
-      this.ionClose.emit();
+      this.ionDidClose.emit();
     }
   }