@angular2-material/menu

md-menu

md-menu is a list of options that displays when triggered. You can read more about menus in the Material Design spec.

Not yet implemented

• prevent-close option, to turn off automatic menu close when clicking outside the menu
• Custom offset support
• Menu groupings (which menus are allowed to open together)

Usage

Setup

Import the MdMenu module.

my-app-module.ts

import {MdMenuModule} from '@angular2-material/menu';

@NgModule({
  imports: [MdMenuModule],
  ...
})
export class MyAppModule {}

For alpha.7, you need to include the overlay styles in your app via a link element. This will look something like

<link href="vendor/@angular2-material/core/overlay/overlay.css" rel="stylesheet">

Simple menu

In your template, create an md-menu element. You can use either <button> or <anchor> tags for your menu items, as long as each is tagged with an md-menu-item attribute. Note that you can disable items by adding the disabled boolean attribute or binding to it.

my-comp.html

<!-- this menu starts as hidden by default -->
<md-menu>
    <button md-menu-item> Refresh </button>
    <button md-menu-item> Settings </button>
    <button md-menu-item> Help </button>
    <button md-menu-item disabled> Sign Out </button>
</md-menu>

Menus are hidden by default, so you'll want to connect up a menu trigger that can open your menu.
You can do so by adding a button tag with an md-menu-trigger-for attribute and passing in the menu instance. You can create a local reference to your menu instance by adding #menu="mdMenu" to
your menu element.

my-comp.html

<!-- menu opens when trigger button is clicked -->
<button md-icon-button [md-menu-trigger-for]="menu">
   <md-icon>more_vert</md-icon>
</button>

<md-menu #menu="mdMenu">
    <button md-menu-item> Refresh </button>
    <button md-menu-item> Settings </button>
    <button md-menu-item> Help </button>
    <button md-menu-item disabled> Sign Out </button>
</md-menu>

Output:

Toggling the menu programmatically

You can also use the menu's API to open or close the menu programmatically from your class. Please note that in this case, an md-menu-trigger-for attribute is still necessary to connect the menu to its trigger element in the DOM.

my-comp.component.ts

class MyComp {
  @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;

  someMethod() {
    this.trigger.openMenu();
  }
}

my-comp.html

<button md-icon-button [md-menu-trigger-for]="menu">
   <md-icon>more_vert</md-icon>
</button>

<md-menu #menu="mdMenu">
    <button md-menu-item> Refresh </button>
    <button md-menu-item> Settings </button>
    <button md-menu-item> Help </button>
    <button md-menu-item disabled> Sign Out </button>
</md-menu>

Customizing menu position

By default, the menu will display after and below its trigger. You can change this display position using the x-position (before | after) and y-position (above | below) attributes.

my-comp.html

<md-menu x-position="before" #menu="mdMenu">
    <button md-menu-item> Refresh </button>
    <button md-menu-item> Settings </button>
    <button md-menu-item> Help </button>
    <button md-menu-item disabled> Sign Out </button>
</md-menu>

Output:

Accessibility

The menu adds role="menu" to the main menu element and role="menuitem" to each menu item. It also adds aria-hasPopup="true" to the trigger element.

Keyboard events:

• DOWN_ARROW: Focus next menu item
• UP_ARROW: Focus previous menu item
• ENTER: Select focused item

Menu attributes

Signature	Values	Description
x-position	`before	after`
y-position	`above	below`

Trigger Programmatic API

Properties

Name	Type	Description
menuOpen	Boolean	Property that is true when the menu is open. It is not settable (use methods below).
onMenuOpen	Observable<void>	Observable that emits when the menu opens.
onMenuClose	Observable<void>	Observable that emits when the menu closes.

Methods

Method	Returns	Description
openMenu()	Promise<void>	Opens the menu. Returns a promise that will resolve when the menu has opened.
closeMenu()	Promise<void>	Closes the menu. Returns a promise that will resolve when the menu has closed.
toggleMenu()	Promise<void>	Toggles the menu. Returns a promise that will resolve when the menu has completed opening or closing.
destroyMenu()	Promise<void>	Destroys the menu overlay completely.