Disable side menu on login page conference app

Thanks @brandyshea for your response it worked

1 Like

hi @brandyshea, menu is now disabled on login screen but when i log out and return to login screen, clicks on the screen open the side menu and closes it. is this a bug. (Android Platform)

Also on iphone platform, screen hangs after logout


You are correct, this is a bug. I created an issue here for it:


Thanks for letting me know. :smile:


@brandyshea one more issue sometimes when i open the side menu it remain opened, menu item is clickable and navigation is working but menu don’t close. Toggle don’t work either (Android Version)


Can you create an issue for this with more details? What version of Android is it, what device, etc. Please and thank you!


With the latest version of the conference app (as of Feb 14, 2016) I get an error on the following line:


ORIGINAL EXCEPTION: TypeError: Cannot read property ‘enable’ of undefined

Any ideas?

We refactored the menu to simplify the API. See the breaking changes in the changelog:


It should work using:


For reference: https://github.com/driftyco/ionic-conference-app/blob/master/app/pages/tutorial/tutorial.ts#L51


@brandyshea not sure if this is a bug or not but the menu is no longer there (expected), the menu icon is still showing (should not display) and the swipe effect for the menu is still there (should not be there).

How can I completely hide/disable/remove the menu on the login page?

import {IonicApp, Page, NavController, MenuController} from 'ionic/ionic';
import {TabsPage} from '../tabs/tabs';
import {SignupPage} from '../signup/signup';
import {UserData} from '../../providers/user-data';

  templateUrl: 'build/pages/login/login.html'
export class LoginPage {
  constructor(nav: NavController, userData: UserData, menu: MenuController) {
    this.nav = nav;
    this.userData = userData;

    this.login = {};
    this.submitted = false;
    this.menu = menu;

  onLogin(form) {
    this.submitted = true;

    if (form.valid) {

  onSignup() {
  onPageDidEnter() {
    // the left menu should be disabled on the login page

  onPageDidLeave() {
    // enable the left menu when leaving the login page


I got rid of the swipe effect by adding the following


and I was able to remove the menu button/icon by removing the following markup from the login.html file

<button menuToggle>
    <ion-icon name="menu"></ion-icon>

I was under the impression that this.menu.enable(false) would take care of everything


Is it possible to dynamically change menu orientation from left to right ?

I’ve tried with Menu service but wasn’t able to find any method related to this.

… or is there some known mambo jambo ninja workaround ?

Menu side is defined with side property:

<ion-menu side="left" [content]="content" id="side-menu"></ion-menu>

You could try to implement some method which updates this property based on your needs.

@sava999 if you change orientation from ltr to rtl and change side="right" menu doesn’t open fully.

Actually it opens up to the deffiniton of right margin when it is in side="left" mode.

So if visibility of side="left" is around 70% of screen, side="right" has visibility of 30% of the screen.

I’ll say that this is but in Ionic2.

@brandyshea - please can you confirm ?

Reference giving -> 404 error

loginPage.ts file

import {NavController, MenuController} from ‘ionic-angular’;

constructor(public navCtrl: NavController, private menuCtrl: MenuController) {


Be sure to set “this.menuCtrl.enable(true)” in your landing page (mainPage) after login, eg.
If I want the menu to work after successful login, I set:

constructor(public navCtrl: NavController, private menuCtrl: MenuController) {

in my mainPage.ts, the menu should work for all pages after login.
Mine seems to…


the right way to do this for any page is by overriding the ionViewWillEnter function and addingg : this.menu.enable(false); to it

ionViewWillEnter() {

and add the ionWillLeave function override like this :

ionViewWillLeave() {

also import the following

import {MenuController} from ‘ionic-angular’;


As of the latest version of Ionic 2 to date (3/16/2017) I had to do this.menu.get().enable(false)


Thanks for this answer!!! This is the right way to do it in the ionic 2.2.1 !!

Thanks for the solution.


import {IonicApp} from 'ionic/ionic';

Do i have to install IonicApp in my ionic its not working

displaying cannot reaD PROPERTY enable OF NULL