chore(api): update menu api per angular#6677

src/lib/menu/menu-directive.ts

@@ -138,20 +138,31 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
     }
   }
 
-  /** Event emitted when the menu is closed. */
+  /**
+   * Event emitted when the menu is closed.
+   * @deprecated Switch to `closed` instead
+   */
   @Output() close = new EventEmitter<void | 'click' | 'keydown'>();
 
+  /** Event emitted when the menu is closed. */
+  @Output() closed = new EventEmitter<void | 'click' | 'keydown'>();
+
   constructor(
     private _elementRef: ElementRef,
     @Inject(MD_MENU_DEFAULT_OPTIONS) private _defaultOptions: MdMenuDefaultOptions) { }
 
-  ngAfterContentInit() {
+  ngAfterContentInit(): void {
     this._keyManager = new FocusKeyManager<MdMenuItem>(this.items).withWrap();
-    this._tabSubscription = this._keyManager.tabOut.subscribe(() => this.close.emit('keydown'));
+    this._tabSubscription = this._keyManager.tabOut.subscribe(() => {
+      this.close.emit('keydown');
+      this.closed.emit('keydown');
+    });
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     this._tabSubscription.unsubscribe();
+    this.closed.emit();
+    this.closed.complete();
     this.close.emit();
     this.close.complete();
   }
@@ -160,7 +171,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
   hover(): Observable<MdMenuItem> {
     return RxChain.from(this.items.changes)
       .call(startWith, this.items)
-      .call(switchMap, (items: MdMenuItem[]) => merge(...items.map(item => item.hover)))
+      .call(switchMap, (items: MdMenuItem[]) => merge(...items.map(item => item.hovered)))
       .result();
   }
 
@@ -169,16 +180,19 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
     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

@@ -49,9 +49,15 @@ export const _MdMenuItemMixinBase = mixinDisabled(MdMenuItemBase);
 export class MdMenuItem extends _MdMenuItemMixinBase implements FocusableOption, CanDisable,
   OnDestroy {
 
-  /** Stream that emits when the menu item is hovered. */
+  /**
+   * Stream that emits when the menu item is hovered.
+   * @deprecated Switch to `hovered` instead
+   */
   hover: Subject<MdMenuItem> = new Subject();
 
+  /** Stream that emits when the menu item is hovered. */
+  hovered: Subject<MdMenuItem> = new Subject();
+
   /** Whether the menu item is highlighted. */
   _highlighted: boolean = false;
 
@@ -69,6 +75,7 @@ export class MdMenuItem extends _MdMenuItemMixinBase implements FocusableOption,
 
   ngOnDestroy() {
     this.hover.complete();
+    this.hovered.complete();
   }
 
   /** Used to set the `tabindex`. */
@@ -93,6 +100,7 @@ export class MdMenuItem extends _MdMenuItemMixinBase implements FocusableOption,
   _emitHoverEvent() {
     if (!this.disabled) {
       this.hover.next(this);
+      this.hovered.next(this);
     }
   }
 

src/lib/menu/menu-panel.ts

@@ -15,7 +15,8 @@ export interface MdMenuPanel {
   yPosition: MenuPositionY;
   overlapTrigger: boolean;
   templateRef: TemplateRef<any>;
-  close: EventEmitter<void | 'click' | 'keydown'>;
+  close?: EventEmitter<void | 'click' | 'keydown'>;
+  closed: EventEmitter<void | 'click' | 'keydown'>;
   parentMenu?: MdMenuPanel | undefined;
   direction?: Direction;
   focusFirstItem: () => void;

src/lib/menu/menu-trigger.ts

@@ -128,12 +128,24 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
   /** References the menu instance that the trigger is associated with. */
   @Input('mdMenuTriggerFor') menu: MdMenuPanel;
 
-  /** Event emitted when the associated menu is opened. */
+  /**
+   * Event emitted when the associated menu is opened.
+   * @deprecated Switch to `menuOpened` instead
+   */
   @Output() onMenuOpen = new EventEmitter<void>();
 
-  /** Event emitted when the associated menu is closed. */
+  /** Event emitted when the associated menu is opened. */
+  @Output() menuOpened = new EventEmitter<void>();
+
+  /**
+   * Event emitted when the associated menu is closed.
+   * @deprecated Switch to `menuClosed` instead
+   */
   @Output() onMenuClose = new EventEmitter<void>();
 
+  /** Event emitted when the associated menu is closed. */
+  @Output() menuClosed = new EventEmitter<void>();
+
   constructor(private _overlay: Overlay,
               private _element: ElementRef,
               private _viewContainerRef: ViewContainerRef,
@@ -147,15 +159,16 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
     }
   }
 
-  ngAfterViewInit() {
+  ngAfterViewInit(): void {
     this._checkMenu();
 
-    this.menu.close.subscribe(reason => {
+    this.menu.closed.subscribe(reason => {
       this.closeMenu();
 
       // 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);
       }
     });
 
@@ -170,7 +183,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
     }
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     if (this._overlayRef) {
       this._overlayRef.dispose();
       this._overlayRef = null;
@@ -203,7 +216,12 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
   openMenu(): void {
     if (!this._menuOpen) {
       this._createOverlay().attach(this._portal);
-      this._closeSubscription = this._menuClosingActions().subscribe(() => this.menu.close.emit());
+      this._closeSubscription = this._menuClosingActions().subscribe(() => {
+        if (this.menu.close) {
+          this.menu.close.emit();
+        }
+        this.menu.closed.emit();
+      });
       this._initMenu();
 
       if (this.menu instanceof MdMenu) {
@@ -218,7 +236,11 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
       this._resetMenu();
       this._overlayRef.detach();
       this._closeSubscription.unsubscribe();
-      this.menu.close.emit();
+      if (this.menu.close) {
+        this.menu.close.emit();
+      }
+
+      this.menu.closed.emit();
 
       if (this.menu instanceof MdMenu) {
         this.menu._resetAnimation();
@@ -227,7 +249,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
   }
 
   /** Focuses the menu trigger. */
-  focus() {
+  focus(): void {
     this._element.nativeElement.focus();
   }
 
@@ -283,7 +305,14 @@ export class MdMenuTrigger implements AfterViewInit, 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();
+
+    if (this._menuOpen) {
+      this.onMenuOpen.emit();
+      this.menuOpened.emit();
+    } else {
+      this.onMenuClose.emit();
+      this.menuClosed.emit();
+    }
 
     if (this.triggersSubmenu()) {
       this._menuItemInstance._highlighted = isOpen;
@@ -294,7 +323,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
    * This method checks that a valid instance of MdMenu has been passed into
    * mdMenuTriggerFor. If not, an exception is thrown.
    */
-  private _checkMenu() {
+  private _checkMenu(): void {
     if (!this.menu) {
       throwMdMenuMissingError();
     }
@@ -398,7 +427,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
   /** Returns a stream that emits whenever an action that should close the menu occurs. */
   private _menuClosingActions() {
     const backdrop = this._overlayRef!.backdropClick();
-    const parentClose = this._parentMenu ? this._parentMenu.close : observableOf(null);
+    const parentClose = this._parentMenu ? this._parentMenu.closed : observableOf(null);
     const hover = this._parentMenu ? RxChain.from(this._parentMenu.hover())
         .call(filter, active => active !== this._menuItemInstance)
         .call(filter, () => this._menuOpen)

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)"
     role="menu">

src/lib/menu/menu.spec.ts

@@ -510,7 +510,7 @@ describe('MdMenu', () => {
       let emitCallback = jasmine.createSpy('emit callback');
       let 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).toHaveBeenCalled();
@@ -1059,7 +1059,7 @@ describe('MdMenu default overrides', () => {
 @Component({
   template: `
     <button [mdMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
-    <md-menu class="custom-one custom-two" #menu="mdMenu" (close)="closeCallback()">
+    <md-menu class="custom-one custom-two" #menu="mdMenu" (closed)="closeCallback()">
       <button md-menu-item> Item </button>
       <button md-menu-item disabled> Disabled </button>
     </md-menu>
@@ -1123,7 +1123,7 @@ class CustomMenuPanel implements MdMenuPanel {
   parentMenu: MdMenuPanel;
 
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
-  @Output() close = new EventEmitter<void | 'click' | 'keydown'>();
+  @Output() closed = new EventEmitter<void | 'click' | 'keydown'>();
   focusFirstItem = () => {};
   setPositionClasses = () => {};
 }