Rename md-menu-trigger-for to mdMenuTriggerFor.

Author: crisbeto

src/demo-app/menu/menu-demo.html

@@ -3,7 +3,7 @@
     <p>You clicked on: {{ selected }}</p>
 
     <md-toolbar>
-      <button md-icon-button [md-menu-trigger-for]="menu" aria-label="Open basic menu">
+      <button md-icon-button [mdMenuTriggerFor]="menu" aria-label="Open basic menu">
         <md-icon>more_vert</md-icon>
       </button>
     </md-toolbar>
@@ -17,7 +17,7 @@
   <div class="menu-section">
     <p> Clicking these will navigate:</p>
     <md-toolbar>
-      <button md-icon-button [md-menu-trigger-for]="anchorMenu" aria-label="Open anchor menu">
+      <button md-icon-button [mdMenuTriggerFor]="anchorMenu" aria-label="Open anchor menu">
         <md-icon>more_vert</md-icon>
       </button>
     </md-toolbar>
@@ -33,7 +33,7 @@
       Position x: before
     </p>
     <md-toolbar class="end-icon">
-      <button md-icon-button [md-menu-trigger-for]="posXMenu" aria-label="Open x-positioned menu">
+      <button md-icon-button [mdMenuTriggerFor]="posXMenu" aria-label="Open x-positioned menu">
         <md-icon>more_vert</md-icon>
       </button>
     </md-toolbar>
@@ -50,7 +50,7 @@
       Position y: above
     </p>
     <md-toolbar>
-      <button md-icon-button [md-menu-trigger-for]="posYMenu" aria-label="Open y-positioned menu">
+      <button md-icon-button [mdMenuTriggerFor]="posYMenu" aria-label="Open y-positioned menu">
         <md-icon>more_vert</md-icon>
       </button>
     </md-toolbar>

src/e2e-app/menu/menu-e2e.html

@@ -2,8 +2,8 @@
   <div style="float:left">
     <div id="text">{{ selected }}</div>
     <button id="start">START</button>
-    <button [md-menu-trigger-for]="menu" id="trigger">TRIGGER</button>
-    <button [md-menu-trigger-for]="menu" id="trigger-two">TRIGGER 2</button>
+    <button [mdMenuTriggerFor]="menu" id="trigger">TRIGGER</button>
+    <button [mdMenuTriggerFor]="menu" id="trigger-two">TRIGGER 2</button>
 
     <md-menu #menu="mdMenu" y-position="below" class="custom">
       <button md-menu-item (click)="selected='one'">One</button>
@@ -12,20 +12,20 @@
       <button md-menu-item>Four</button>
     </md-menu>
 
-    <button [md-menu-trigger-for]="beforeMenu" id="before-t">
+    <button [mdMenuTriggerFor]="beforeMenu" id="before-t">
       BEFORE
     </button>
     <md-menu x-position="before" y-position="below" class="before" #beforeMenu="mdMenu">
       <button md-menu-item>Item</button>
     </md-menu>
 
     <div class="bottom-row">
-      <button [md-menu-trigger-for]="aboveMenu" id="above-t">ABOVE</button>
+      <button [mdMenuTriggerFor]="aboveMenu" id="above-t">ABOVE</button>
       <md-menu y-position="above" class="above" #aboveMenu="mdMenu">
         <button md-menu-item>Item</button>
       </md-menu>
 
-      <button [md-menu-trigger-for]="combined" id="combined-t">
+      <button [mdMenuTriggerFor]="combined" id="combined-t">
         BOTH
       </button>
       <md-menu x-position="before" y-position="above" class="combined" #combined="mdMenu">

src/lib/menu/README.md

@@ -1,6 +1,6 @@
 # md-menu
 
-`md-menu` is a list of options that displays when triggered.  You can read more about menus in the 
+`md-menu` is a list of options that displays when triggered.  You can read more about menus in the
 [Material Design spec](https://material.google.com/components/menus.html).
 
 ### Not yet implemented
@@ -13,8 +13,8 @@
 
 ### 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 
+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*
@@ -28,15 +28,15 @@ disable items by adding the `disabled` boolean attribute or binding to it.
 </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  
+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 `mdMenuTriggerFor` 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*
 ```html
 <!-- menu opens when trigger button is clicked -->
-<button md-icon-button [md-menu-trigger-for]="menu">
+<button md-icon-button [mdMenuTriggerFor]="menu">
    <md-icon>more_vert</md-icon>
 </button>
 
@@ -55,10 +55,10 @@ 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 
+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 `mdMenuTriggerFor` attribute is still necessary to connect
 the menu to its trigger element in the DOM.
-  
+
 *my-comp.component.ts*
 ```ts
 class MyComp {
@@ -72,7 +72,7 @@ class MyComp {
 
 *my-comp.html*
 ```html
-<button md-icon-button [md-menu-trigger-for]="menu">
+<button md-icon-button [mdMenuTriggerFor]="menu">
    <md-icon>more_vert</md-icon>
 </button>
 
@@ -91,15 +91,15 @@ Menus also support displaying `md-icon` elements before the menu item text.
 *my-comp.html*
 ```html
 <md-menu #menu="mdMenu">
-  <button md-menu-item> 
+  <button md-menu-item>
     <md-icon> dialpad </md-icon>
     <span> Redial </span>
   </button>
-  <button md-menu-item disabled> 
+  <button md-menu-item disabled>
     <md-icon> voicemail </md-icon>
     <span> Check voicemail </span>
   </button>
-  <button md-menu-item> 
+  <button md-menu-item>
     <md-icon> notifications_off </md-icon>
     <span> Disable alerts </span>
   </button>
@@ -114,8 +114,8 @@ Output:
 
 ### 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.  
+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*
 ```html
@@ -134,7 +134,7 @@ Output:
 
 ### Accessibility
 
-The menu adds `role="menu"` to the main menu element and `role="menuitem"` to each menu item. It 
+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:
@@ -146,26 +146,26 @@ also adds `aria-hasPopup="true"` to the trigger element.
 
 | Signature | Values | Description |
 | --- | --- | --- |
-| `x-position` | `before | after` | The horizontal position of the menu in relation to the trigger. Defaults to `after`. | 
+| `x-position` | `before | after` | The horizontal position of the menu in relation to the trigger. Defaults to `after`. |
 | `y-position` | `above | below` | The vertical position of the menu in relation to the trigger. Defaults to `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. | 
+| `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. 
-  
+| `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.
+
 

src/lib/menu/menu-errors.ts

@@ -10,7 +10,7 @@ export class MdMenuMissingError extends MdError {
 
     Example:
       <md-menu #menu="mdMenu"></md-menu>
-      <button [md-menu-trigger-for]="menu"></button>
+      <button [mdMenuTriggerFor]="menu"></button>
     `);
   }
 }

src/lib/menu/menu-trigger.ts

@@ -32,7 +32,7 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
  * responsible for toggling the display of the provided menu instance.
  */
 @Directive({
-  selector: '[md-menu-trigger-for], [mat-menu-trigger-for]',
+  selector: '[md-menu-trigger-for], [mat-menu-trigger-for], [mdMenuTriggerFor]',
   host: {
     'aria-haspopup': 'true',
     '(mousedown)': '_handleMousedown($event)',
@@ -51,7 +51,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
   // the first item of the list when the menu is opened via the keyboard
   private _openedByMouse: boolean = false;
 
-  @Input('md-menu-trigger-for') menu: MdMenuPanel;
+  @Input('mdMenuTriggerFor') menu: MdMenuPanel;
   @Output() onMenuOpen = new EventEmitter<void>();
   @Output() onMenuClose = new EventEmitter<void>();
 
@@ -157,7 +157,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
 
   /**
    *  This method checks that a valid instance of MdMenu has been passed into
-   *  md-menu-trigger-for.  If not, an exception is thrown.
+   *  mdMenuTriggerFor. If not, an exception is thrown.
    */
   private _checkMenu() {
     if (!this.menu) {

src/lib/menu/menu.spec.ts

@@ -284,7 +284,7 @@ describe('MdMenu', () => {
 
 @Component({
   template: `
-    <button [md-menu-trigger-for]="menu" #triggerEl>Toggle menu</button>
+    <button [mdMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
     <md-menu #menu="mdMenu">
       <button md-menu-item> Item </button>
       <button md-menu-item disabled> Disabled </button>
@@ -298,7 +298,7 @@ class SimpleMenu {
 
 @Component({
   template: `
-    <button [md-menu-trigger-for]="menu" #triggerEl>Toggle menu</button>
+    <button [mdMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
     <md-menu x-position="before" y-position="above" #menu="mdMenu">
       <button md-menu-item> Positioned Content </button>
     </md-menu>
@@ -332,7 +332,7 @@ class CustomMenuPanel implements MdMenuPanel {
 
 @Component({
   template: `
-    <button [md-menu-trigger-for]="menu">Toggle menu</button>
+    <button [mdMenuTriggerFor]="menu">Toggle menu</button>
     <custom-menu #menu="mdCustomMenu">
       <button md-menu-item> Custom Content </button>
     </custom-menu>