fix(menu-toggle): move logic for css class to the menu toggle

fixes #8943

src/components/button/button.ts

@@ -126,9 +126,6 @@ export class Button extends Ion {
   /** @private */
   _role: string = 'button'; // bar-button
 
-  /** @private */
-  _mt: boolean; // menutoggle
-
   /** @private */
   _size: string; // large/small/default
 
@@ -259,7 +256,6 @@ export class Button extends Ion {
   }
 
   constructor(
-    @Attribute('menuToggle') menuToggle: string,
     @Attribute('ion-button') ionButton: string,
     config: Config,
     elementRef: ElementRef,
@@ -275,12 +271,6 @@ export class Button extends Ion {
     if (ionButton.trim().length > 0) {
       this.setRole(ionButton);
     }
-
-    // menuToggle can be added with or without a string
-    // but if the attribute isn't added it will be null
-    if (menuToggle !== null) {
-      this._mt = true;
-    }
   }
 
   /** @private */
@@ -307,7 +297,6 @@ export class Button extends Ion {
       this.setElementClass(role, assignCssClass); // button
       this.setElementClass(`${role}-${this._mode}`, assignCssClass); // button
 
-      this._setClass('menutoggle', this._mt); // menutoggle
       this._setClass(this._style, assignCssClass); // button-clear
       this._setClass(this._shape, assignCssClass); // button-round
       this._setClass(this._display, assignCssClass); // button-full

src/components/menu/menu-toggle.ts

@@ -1,5 +1,6 @@
-import { Directive, ElementRef, Input, HostListener, Optional } from '@angular/core';
+import { Directive, Input, HostListener, Optional } from '@angular/core';
 
+import { Button } from '../button/button';
 import { MenuController } from './menu-controller';
 import { Navbar } from '../navbar/navbar';
 import { ViewController } from '../../navigation/view-controller';
@@ -86,8 +87,7 @@ import { ViewController } from '../../navigation/view-controller';
 @Directive({
   selector: '[menuToggle]',
   host: {
-    '[hidden]': 'isHidden',
-    'menuToggle': '' // ensures the attr is there for css when using [menuToggle]
+    '[hidden]': 'isHidden'
   }
 })
 export class MenuToggle {
@@ -97,6 +97,11 @@ export class MenuToggle {
    */
   @Input() menuToggle: string;
 
+  /**
+   * @private
+   */
+  private _isButton: boolean;
+
   /**
    * @private
    */
@@ -104,13 +109,21 @@ export class MenuToggle {
 
   constructor(
     private _menu: MenuController,
-    elementRef: ElementRef,
     @Optional() private _viewCtrl: ViewController,
+    @Optional() private _button: Button,
     @Optional() private _navbar: Navbar
   ) {
+    this._isButton = !!_button;
     this._inNavbar = !!_navbar;
   }
 
+  ngAfterContentInit() {
+    // Add the bar-button-menutoggle / button-menutoggle class
+    if (this._isButton) {
+      this._button._setClass('menutoggle', true);
+    }
+  }
+
   /**
   * @private
   */

src/components/menu/test/basic/app-module.ts

@@ -9,8 +9,9 @@ export class Page1 {
   constructor(
     public navCtrl: NavController,
     public alertCtrl: AlertController,
-    public modalCtrl: ModalController
-  ) { }
+    public modalCtrl: ModalController) { }
+
+  myMenu: string = 'right';
 
   presentAlert() {
     let alert = this.alertCtrl.create({
@@ -32,22 +33,22 @@ export class Page1 {
   }
 }
 
-@Component({templateUrl: 'modal.html'})
+@Component({ templateUrl: 'modal.html' })
 export class Modal {
-  constructor(public viewController: ViewController) {}
+  constructor(public viewController: ViewController) { }
   close() {
     this.viewController.dismiss();
   }
 }
 
 
-@Component({templateUrl: 'page3.html'})
-export class Page3 {}
+@Component({ templateUrl: 'page3.html' })
+export class Page3 { }
 
 
-@Component({templateUrl: 'page2.html'})
+@Component({ templateUrl: 'page2.html' })
 export class Page2 {
-  constructor(public navCtrl: NavController) {}
+  constructor(public navCtrl: NavController) { }
 
   page3() {
     this.navCtrl.push(Page3);
@@ -61,7 +62,7 @@ export class Page2 {
 export class E2EPage {
   rootPage: any;
   changeDetectionCount: number = 0;
-  pages: Array<{title: string, component: any}>;
+  pages: Array<{ title: string, component: any }>;
   @ViewChild(Nav) nav: Nav;
 
   constructor(public menuCtrl: MenuController) {
@@ -139,4 +140,4 @@ export class E2EApp {
     Modal
   ]
 })
-export class AppModule {}
+export class AppModule { }

src/components/menu/test/basic/page1.html

@@ -22,7 +22,7 @@
       </button>
     </ion-buttons>
 
-    <button ion-button menuToggle="right" right color="secondary">
+    <button ion-button [menuToggle]="myMenu" right color="secondary">
       <ion-icon name="menu"></ion-icon>
     </button>