fix(menu): not emitting close event when closing via the backdrop

src/lib/menu/menu-directive.ts

@@ -64,7 +64,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
   ngAfterContentInit() {
     this._keyManager = new FocusKeyManager(this.items).withWrap();
     this._tabSubscription = this._keyManager.tabOut.subscribe(() => {
-      this._emitCloseEvent();
+      this.emitCloseEvent();
     });
   }
 
@@ -102,19 +102,19 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
    * This emits a close event to which the trigger is subscribed. When emitted, the
    * trigger will close the menu.
    */
-  _emitCloseEvent(): void {
+  emitCloseEvent(): void {
     this.close.emit();
   }
 
   private _setPositionX(pos: MenuPositionX): void {
-    if ( pos !== 'before' && pos !== 'after') {
+    if (pos !== 'before' && pos !== 'after') {
       throw new MdMenuInvalidPositionX();
     }
     this.positionX = pos;
   }
 
   private _setPositionY(pos: MenuPositionY): void {
-    if ( pos !== 'above' && pos !== 'below') {
+    if (pos !== 'above' && pos !== 'below') {
       throw new MdMenuInvalidPositionY();
     }
     this.positionY = pos;

src/lib/menu/menu-panel.ts

@@ -8,5 +8,6 @@ export interface MdMenuPanel {
   templateRef: TemplateRef<any>;
   close: EventEmitter<void>;
   focusFirstItem: () => void;
+  emitCloseEvent: () => void;
   setPositionClasses: (x: MenuPositionX, y: MenuPositionY) => void;
 }

src/lib/menu/menu-trigger.ts

@@ -33,7 +33,7 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
  * TODO(andrewseguin): Remove the kebab versions in favor of camelCased attribute selectors
  */
 @Directive({
-  selector: `[md-menu-trigger-for], [mat-menu-trigger-for], 
+  selector: `[md-menu-trigger-for], [mat-menu-trigger-for],
              [mdMenuTriggerFor], [matMenuTriggerFor]`,
   host: {
     'aria-haspopup': 'true',
@@ -143,7 +143,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
    */
   private _subscribeToBackdrop(): void {
     this._backdropSubscription = this._overlayRef.backdropClick().subscribe(() => {
-      this.closeMenu();
+      this.menu.emitCloseEvent();
     });
   }
 

src/lib/menu/menu.html

@@ -1,6 +1,6 @@
 <template>
   <div class="mat-menu-panel" [ngClass]="_classList" (keydown)="_keyManager.onKeydown($event)"
-    (click)="_emitCloseEvent()" [@transformMenu]="'showing'">
+    (click)="emitCloseEvent()" [@transformMenu]="'showing'">
     <div class="mat-menu-content" [@fadeInItems]="'showing'">
       <ng-content></ng-content>
     </div>

src/lib/menu/menu.spec.ts

@@ -384,12 +384,40 @@ describe('MdMenu', () => {
 
   });
 
+  describe('close event', () => {
+    let fixture: ComponentFixture<SimpleMenu>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleMenu);
+      fixture.detectChanges();
+      fixture.componentInstance.trigger.openMenu();
+    });
+
+    it('should emit an event when a menu item is clicked', () => {
+      const menuItem = overlayContainerElement.querySelector('[md-menu-item]') as HTMLElement;
+
+      menuItem.click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.closeCallback).toHaveBeenCalled();
+    });
+
+    it('should emit a close event when the backdrop is clicked', () => {
+      const backdrop = <HTMLElement>overlayContainerElement.querySelector('.cdk-overlay-backdrop');
+
+      backdrop.click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.closeCallback).toHaveBeenCalled();
+    });
+  });
+
 });
 
 @Component({
   template: `
     <button [mdMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
-    <md-menu #menu="mdMenu">
+    <md-menu #menu="mdMenu" (close)="closeCallback()">
       <button md-menu-item> Item </button>
       <button md-menu-item disabled> Disabled </button>
     </md-menu>
@@ -398,6 +426,7 @@ describe('MdMenu', () => {
 class SimpleMenu {
   @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;
   @ViewChild('triggerEl') triggerEl: ElementRef;
+  closeCallback = jasmine.createSpy('menu closed callback');
 }
 
 @Component({
@@ -450,6 +479,9 @@ class CustomMenuPanel implements MdMenuPanel {
   @Output() close = new EventEmitter<void>();
   focusFirstItem = () => {};
   setPositionClasses = () => {};
+  emitCloseEvent() {
+    this.close.emit();
+  }
 }
 
 @Component({