fix(menu): make @output names consistent #6677 (#8053)

* fix(menu): make @output names consistent #6677

* chore(nit): pr feedback updates

* chore(merge): fix bad merge

Author: amcdnl

src/lib/menu/menu-directive.ts

@@ -142,7 +142,13 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy {
   }
 
   /** Event emitted when the menu is closed. */
-  @Output() close = new EventEmitter<void | 'click' | 'keydown'>();
+  @Output() closed = new EventEmitter<void | 'click' | 'keydown'>();
+
+  /**
+   * Event emitted when the menu is closed.
+   * @deprecated Switch to `closed` instead
+   */
+  @Output() close = this.closed;
 
   constructor(
     private _elementRef: ElementRef,
@@ -156,39 +162,39 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy {
 
   ngOnDestroy() {
     this._tabSubscription.unsubscribe();
-    this.close.emit();
-    this.close.complete();
+    this.closed.emit();
+    this.closed.complete();
   }
 
   /** Stream that emits whenever the hovered menu item changes. */
-  hover(): Observable<MatMenuItem> {
+  _hovered(): Observable<MatMenuItem> {
     if (this.items) {
       return this.items.changes.pipe(
         startWith(this.items),
-        switchMap(items => merge(...items.map(item => item.hover)))
+        switchMap(items => merge(...items.map(item => item._hovered)))
       );
     }
 
     return this._ngZone.onStable
       .asObservable()
-      .pipe(first(), switchMap(() => this.hover()));
+      .pipe(first(), switchMap(() => this._hovered()));
   }
 
   /** Handle a keyboard event from the menu, delegating to the appropriate action. */
   _handleKeydown(event: KeyboardEvent) {
     switch (event.keyCode) {
       case ESCAPE:
-        this.close.emit('keydown');
+        this.closed.emit('keydown');
         event.stopPropagation();
       break;
       case LEFT_ARROW:
         if (this.parentMenu && this.direction === 'ltr') {
-          this.close.emit('keydown');
+          this.closed.emit('keydown');
         }
       break;
       case RIGHT_ARROW:
         if (this.parentMenu && this.direction === 'rtl') {
-          this.close.emit('keydown');
+          this.closed.emit('keydown');
         }
       break;
       default:

src/lib/menu/menu-item.ts

@@ -51,7 +51,7 @@ export class MatMenuItem extends _MatMenuItemMixinBase implements FocusableOptio
   OnDestroy {
 
   /** Stream that emits when the menu item is hovered. */
-  hover: Subject<MatMenuItem> = new Subject();
+  _hovered: Subject<MatMenuItem> = new Subject();
 
   /** Whether the menu item is highlighted. */
   _highlighted: boolean = false;
@@ -69,7 +69,7 @@ export class MatMenuItem extends _MatMenuItemMixinBase implements FocusableOptio
   }
 
   ngOnDestroy() {
-    this.hover.complete();
+    this._hovered.complete();
   }
 
   /** Used to set the `tabindex`. */
@@ -93,7 +93,7 @@ export class MatMenuItem extends _MatMenuItemMixinBase implements FocusableOptio
   /** Emits to the hover stream. */
   _emitHoverEvent() {
     if (!this.disabled) {
-      this.hover.next(this);
+      this._hovered.next(this);
     }
   }
 

src/lib/menu/menu-trigger.ts

@@ -107,10 +107,22 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
   @Input('matMenuTriggerFor') menu: MatMenuPanel;
 
   /** Event emitted when the associated menu is opened. */
-  @Output() onMenuOpen = new EventEmitter<void>();
+  @Output() menuOpened = new EventEmitter<void>();
+
+  /**
+   * Event emitted when the associated menu is opened.
+   * @deprecated Switch to `menuOpened` instead
+   */
+  @Output() onMenuOpen = this.menuOpened;
 
   /** Event emitted when the associated menu is closed. */
-  @Output() onMenuClose = new EventEmitter<void>();
+  @Output() menuClosed = new EventEmitter<void>();
+
+  /**
+   * Event emitted when the associated menu is closed.
+   * @deprecated Switch to `menuClosed` instead
+   */
+  @Output() onMenuClose = this.menuClosed;
 
   constructor(private _overlay: Overlay,
               private _element: ElementRef,
@@ -133,13 +145,13 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
 
       // If a click closed the menu, we should close the entire chain of nested menus.
       if (reason === 'click' && this._parentMenu) {
-        this._parentMenu.close.emit(reason);
+        this._parentMenu.closed.emit(reason);
       }
     });
 
     if (this.triggersSubmenu()) {
       // Subscribe to changes in the hovered item in order to toggle the panel.
-      this._hoverSubscription = this._parentMenu.hover()
+      this._hoverSubscription = this._parentMenu._hovered()
           .pipe(filter(active => active === this._menuItemInstance))
           .subscribe(() => {
             this._openedByMouse = true;
@@ -273,7 +285,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
   // set state rather than toggle to support triggers sharing a menu
   private _setIsMenuOpen(isOpen: boolean): void {
     this._menuOpen = isOpen;
-    this._menuOpen ? this.onMenuOpen.emit() : this.onMenuClose.emit();
+    this._menuOpen ? this.menuOpened.emit() : this.menuClosed.emit();
 
     if (this.triggersSubmenu()) {
       this._menuItemInstance._highlighted = isOpen;
@@ -388,7 +400,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
   private _menuClosingActions() {
     const backdrop = this._overlayRef!.backdropClick();
     const parentClose = this._parentMenu ? this._parentMenu.close : observableOf();
-    const hover = this._parentMenu ? this._parentMenu.hover().pipe(
+    const hover = this._parentMenu ? this._parentMenu._hovered().pipe(
       filter(active => active !== this._menuItemInstance),
       filter(() => this._menuOpen)
     ) : observableOf();

src/lib/menu/menu.html

@@ -3,7 +3,7 @@
     class="mat-menu-panel"
     [ngClass]="_classList"
     (keydown)="_handleKeydown($event)"
-    (click)="close.emit('click')"
+    (click)="closed.emit('click')"
     [@transformMenu]="_panelAnimationState"
     (@transformMenu.done)="_onAnimationDone($event)"
     tabindex="-1"

src/lib/menu/menu.spec.ts

@@ -559,7 +559,7 @@ describe('MatMenu', () => {
       const emitCallback = jasmine.createSpy('emit callback');
       const completeCallback = jasmine.createSpy('complete callback');
 
-      fixture.componentInstance.menu.close.subscribe(emitCallback, null, completeCallback);
+      fixture.componentInstance.menu.closed.subscribe(emitCallback, null, completeCallback);
       fixture.destroy();
 
       expect(emitCallback).toHaveBeenCalledWith(undefined);
@@ -625,7 +625,7 @@ describe('MatMenu', () => {
       fixture.detectChanges();
 
       const spy = jasmine.createSpy('hover spy');
-      const subscription = instance.rootMenu.hover().subscribe(spy);
+      const subscription = instance.rootMenu._hovered().subscribe(spy);
       const menuItems = overlay.querySelectorAll('[mat-menu-item]');
 
       dispatchMouseEvent(menuItems[0], 'mouseenter');
@@ -1112,7 +1112,7 @@ describe('MatMenu default overrides', () => {
 @Component({
   template: `
     <button [matMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
-    <mat-menu class="custom-one custom-two" #menu="matMenu" (close)="closeCallback($event)">
+    <mat-menu class="custom-one custom-two" #menu="matMenu" (closed)="closeCallback($event)">
       <button mat-menu-item> Item </button>
       <button mat-menu-item disabled> Disabled </button>
       <button mat-menu-item>