feature(menu): add menuToggle directive

packages/angular/src/directives/menu-toggle.ts

@@ -0,0 +1,114 @@
+import { Directive, HostListener, Input } from '@angular/core';
+
+
+import { MenuController } from '../providers/menu-controller';
+
+/**
+ * @name MenuToggle
+ * @description
+ * The `menuToggle` directive can be placed on any button to toggle a menu open or closed.
+ * If it is added to the [NavBar](../../toolbar/Navbar) of a page, the button will only appear
+ * when the page it's in is currently a root page. See the [Menu Navigation Bar Behavior](../Menu#navigation-bar-behavior)
+ * docs for more information.
+ *
+ *
+ * @usage
+ *
+ * A simple `menuToggle` button can be added using the following markup:
+ *
+ * ```html
+ * <button ion-button menuToggle>Toggle Menu</button>
+ * ```
+ *
+ * To toggle a specific menu by its id or side, give the `menuToggle`
+ * directive a value.
+ *
+ * ```html
+ * <button ion-button menuToggle="right">Toggle Right Menu</button>
+ * ```
+ *
+ * If placing the `menuToggle` in a navbar or toolbar, it should be
+ * placed as a child of the `<ion-navbar>` or `<ion-toolbar>`, and not in
+ * the `<ion-buttons>` element:
+ *
+ * ```html
+ * <ion-header>
+ *
+ *   <ion-navbar>
+ *     <ion-buttons start>
+ *       <button ion-button>
+ *         <ion-icon name="contact"></ion-icon>
+ *       </button>
+ *     </ion-buttons>
+ *     <button ion-button menuToggle>
+ *       <ion-icon name="menu"></ion-icon>
+ *     </button>
+ *     <ion-title>
+ *       Title
+ *     </ion-title>
+ *     <ion-buttons end>
+ *       <button ion-button (click)="doClick()">
+ *         <ion-icon name="more"></ion-icon>
+ *       </button>
+ *     </ion-buttons>
+ *   </ion-navbar>
+ *
+ * </ion-header>
+ * ```
+ *
+ * Similar to `<ion-buttons>`, the `menuToggle` can be positioned using
+ * `start`, `end`, `left`, or `right`:
+ *
+ * ```html
+ * <ion-toolbar>
+ *   <button ion-button menuToggle right>
+ *     <ion-icon name="menu"></ion-icon>
+ *   </button>
+ *   <ion-title>
+ *     Title
+ *   </ion-title>
+ *   <ion-buttons end>
+ *     <button ion-button (click)="doClick()">
+ *       <ion-icon name="more"></ion-icon>
+ *     </button>
+ *   </ion-buttons>
+ * </ion-toolbar>
+ * ```
+ *
+ * See the [Toolbar API docs](../../toolbar/Toolbar) for more information
+ * on the different positions.
+ *
+ * @demo /docs/demos/src/menu/
+ * @see {@link /docs/components#menus Menu Component Docs}
+ * @see {@link ../../menu/Menu Menu API Docs}
+ */
+@Directive({
+  selector: '[menuToggle]',
+  host: {
+    '[hidden]': 'isHidden'
+  }
+})
+export class MenuToggle {
+
+  /**
+   * @hidden
+   */
+  @Input() menuToggle: string;
+
+
+  constructor(
+    private _menu: MenuController,
+  ) {
+
+  }
+
+  /**
+  * @hidden
+  */
+  @HostListener('click')
+  toggle() {
+    const menu = this._menu.get(this.menuToggle);
+    menu && menu.toggle();
+  }
+
+}

packages/angular/src/index.ts

@@ -1,8 +1,11 @@
 export { IonicAngularModule } from './module';
 
-/* Directives/Components */
+/* Components */
 export { IonNavDelegate } from './components/ion-nav';
 
+/* Directives */
+export { MenuToggle } from './directives/menu-toggle';
+
 /* Providers */
 export { ActionSheetController, ActionSheetProxy } from './providers/action-sheet-controller';
 export { AlertController, AlertProxy } from './providers/alert-controller';

packages/angular/src/module.ts

@@ -15,6 +15,9 @@ import { TextValueAccessor } from './control-value-accessors/text-value-accessor
 /* Components */
 import { IonNavDelegate } from './components/ion-nav';
 
+/* Directives */
+import { MenuToggle } from './directives/menu-toggle';
+
 /* Providers */
 import { ActionSheetController } from './providers/action-sheet-controller';
 import { AlertController } from './providers/alert-controller';
@@ -31,6 +34,7 @@ import { ToastController } from './providers/toast-controller';
   declarations: [
     BooleanValueAccessor,
     IonNavDelegate,
+    MenuToggle,
     NumericValueAccessor,
     RadioValueAccessor,
     SelectValueAccessor,
@@ -39,6 +43,7 @@ import { ToastController } from './providers/toast-controller';
   exports: [
     BooleanValueAccessor,
     IonNavDelegate,
+    MenuToggle,
     NumericValueAccessor,
     RadioValueAccessor,
     SelectValueAccessor,