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
- 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">
Open
login.html
and remove the<ion-navbar>
code from<ion-header>
so that the menu will not display on the page.Open
login.ts
and import theMenuController
fromionic/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.