Disable side menu on login page conference app

[Nikhil_dhar123]

hi

import {IonicApp} from 'ionic/ionic';

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

[Nikhil_dhar123]

displaying cannot reaD PROPERTY enable OF NULL

[sangwin_smartdata]

@brandyshea

import {IonicApp, Page, NavController} from ‘ionic/ionic’;

Where is this coming from??
import {IonicApp, Page, NavController} from ‘ionic/ionic’;

[brandyshea]

That comment is pretty old, the syntax has changed. The docs for the latest version can be found here: http://ionicframework.com/docs/api/components/app/MenuController/

<ion-menu id="authenticated" side="left" [content]="mycontent">...</ion-menu>
<ion-menu id="unauthenticated" side="left" [content]="mycontent">...</ion-menu>
<ion-nav #mycontent [root]="rootPage"></ion-nav>

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

@Component({...})
export class MyPage {

 constructor(public menuCtrl: MenuController) {

 }

 openMenu() {
   this.menuCtrl.open();
 }

 closeMenu() {
   this.menuCtrl.close();
 }

 toggleMenu() {
   this.menuCtrl.toggle();
 }

  enableAuthenticatedMenu() {
    this.menuCtrl.enable(true, 'authenticated');
    this.menuCtrl.enable(false, 'unauthenticated');
  }
}

The source for the API demo is here: https://github.com/ionic-team/ionic/blob/master/demos/src/menu/pages/page-one/page-one.ts

Edit: updated my previous comment with the correct syntax.

[aprdv47]

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

[Tanzeelrana901223]

ionViewDidLoad() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.menu.enable(false, ‘leftMenu’);
this.menu.swipeEnable(false, ‘leftMenu’);
this.splashScreen.hide();
});
}

<ion-menu id=“leftMenu” [content]=“content”>

Doesnt work for me

I want to disable swipe and enable whne I know someone is logged in

[prashant454]

thanks worked like charm

[yasuracreation]

that working … and thanks …

[AravindhGopi]

it works thanks…

[AndrWeisR]

@Tanzeelrana901223

ionViewWillEnter

Note, it’s important to use ionViewWillEnter and not ionViewDidEnter, to ensure that the view events are captured in the right order. If you use DidLeave and DidEnter, you could find that page 1’s DidLeave may fire after page 2’s DidEnter, with the net result that the side menu is incorrectly left enabled by the page 1 code.

[mariomol]

Hi there… i’m trying to close the menu in a desktop view… but this do not work… it always show up the menu… this make the menu closed just when mobile views (smaller sizes)

The enable false works… but removes the hamburguer button to open it again… the close does not close at all
What i tested

    this.menuCtrl.swipeEnable(false);
    this.menuCtrl.enable(false); ```

[mariomol]

forget about it… my bad… was using a split pane component

[Jalvarez05]

I’ve solved this with this line in my login constructor :
this.menu.enable(false);

[Prophet8826]

Thanks this worked for me !

[faudas]

Dear @brandyshea,

This is Fausto from Italy and I recently follow your old but gold notices, long my first approach in Ionic.
In particular I’m focus on the routing. Really hard for me to understand… well in order to your replay concerning the sidemenu visibility, I really appreciate if you can suggest me something about my case.

import { NgModule } from ‘@angular/core’;
import { MenuController } from ‘@ionic/angular’;
import { PreloadAllModules, RouterModule, Routes } from ‘@angular/router’;

const routes: Routes = [
{
path: ‘’,
redirectTo: ‘login’,
pathMatch: ‘full’
},
{
path: ‘dashboard’,
loadChildren: () => import(’./pages/dashboard/dashboard.module’).then( m => m.DashboardPageModule)
},
{
path: ‘lista-clienti’,
loadChildren: () => import(’./pages/lista-clienti/lista-clienti.module’).then( m => m.ListaClientiPageModule)
},
{
path: ‘user-profile’,
loadChildren: () => import(’./pages/user-profile/user-profile.module’).then( m => m.UserProfilePageModule)
},
{
path: ‘templates’,
loadChildren: () => import(’./pages/templates/templates.module’).then( m => m.TemplatesPageModule)
},
{
path: ‘support-request’,
loadChildren: () => import(’./pages/support-request/support-request.module’).then( m => m.SupportRequestPageModule)
},
{
path: ‘login’,
loadChildren: () => import(’./pages/login/login.module’).then( m => m.LoginPageModule)
}
];

@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}

How i can solve this tricky…?