Ionic 2 - Disable side menu in log in page

import {  MenuController } from 'ionic-angular';

constructor(....... ........ .......... .......,private menu : MenuController)


ionViewDidEnter() {
    // the root left menu should be disabled on this page
    this.menu.enable(false);
  }

  ionViewWillLeave() {
    // enable the root left menu when leaving this page
    this.menu.enable(true);
  }

this will hide the menu


The following worked for me on Ionic2 v.2.2.0

  1. Open src/app/app.html and add an ID to your <ion-menu> element

So that this,

<ion-menu [content]="content">

Becomes this.

<ion-menu id="myMenu" [content]="content">
  1. Open login.html and remove the <ion-navbar> code from <ion-header> so that the menu will not display on the page.

  2. Open login.ts and import the MenuController from ionic/angular.

In the constructor set enable() on MenuCtrl to false and add the menu ID as the second parameter. Even though the menu isn't showing, doing this will prevent the user from swiping to open the menu.

Example login.ts

import { Component } from '@angular/core';
import { NavController, MenuController } from 'ionic-angular';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {

  constructor(
    public navCtrl: NavController,
    public menuCtrl: MenuController
  ) {
    this.menuCtrl.enable(false, 'myMenu');
  }
}

Günter from the comments should be correct. Constructor should be:

constructor(navController, httpService, menu) {...}

When you use plain es6 javascript you have to declare your injectables in the static get parameters() function. Then in the constructor you declare the variable name that represents each injectable in the same order you declared the injectables in the returned array. The colon syntax is used when you use TypeScript and is later transpiled to the plain es6 javascript notation. In other words, the colon syntax is syntactical sugar that is only available if your app is configured to handle TypeScript.

Tags:

Angular

Ionic2