Disable swipe to view sidemenu ionic 2

Question

I'm using a sidemenu ionic 2. when I swipe this page from left to right the side menu slides out i need to disable sidemenu swipe in particular page.

app.html

    <ion-menu [content]="content">
     <ion-content>
      <ion-list>
       <button ion-item *ngFor="let p of pages" menuClose (click)="openPage(p)" >
        <ion-icon name="{{p.icon}}" item-left></ion-icon>
        {{p.title}}
      </button>
     </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="true"></ion-nav>

page.html I went to disable swipemenu in this page, Disable only when i swipe

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/portrait/portrait.html'
})
export class Portrait {
}

page.html

<ion-navbar persianred *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
   Portrait
  </ion-title>
</ion-navbar>

Answer 1

There are several ways to do this, based on where you want to disable the menu:

1. Disable it just on one page
2. Disable it on some pages (without repeating the same code over and over again)
3. Disable it in all the pages

---

1) Disable it just on one page

If you want to disable the swipe to view in just one page, the easiest way would be to inject the MenuController instance and use the swipeEnable(shouldEnable, menuId) method (Ionic docs).

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

@Component({
  templateUrl:"home.html"
})
export class HomePage {

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

  ionViewDidEnter() {
    this.menu.swipeEnable(false);

    // If you have more than one side menu, use the id like below
    // this.menu.swipeEnable(false, 'menu1');
  }

  ionViewWillLeave() {
    // Don't forget to return the swipe to normal, otherwise 
    // the rest of the pages won't be able to swipe to open menu
    this.menu.swipeEnable(true);

    // If you have more than one side menu, use the id like below
    // this.menu.swipeEnable(true, 'menu1');
   }

}

Please notice two things:

1) If you use the id, then you'll need to add that id to your menu:

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

2) You need the view to be already loaded to be able to disable the menu, so one way to do it is by using the ionViewDidEnter event.

---

2) Disable it on some pages

If you want to disable the side menu on some pages (like the login/register page) but you don't want to inject the MenuController on each of those pages and then handle the ionViewDidEnter/ionViewWillLeave, you could use a Custom Decorator. Take a look at this SO answer for more information.

---

3) Disable it in all the pages

If you want to disable the swipe to view everywhere in your app, the easiest way would be to use the swipeEnabled input property (Ionic docs):

<ion-menu [content]="content" [swipeEnabled]="false">...</ion-menu>

Answer 2

You can use the enable method of the MenuController to enable/disable the menu for a particular page.

Call enable with the Menu ID when you open the page and disable when you move away from it. You can omit the Menu ID if you have a single menu instance in your app.

Source

Answer 3

best and easy

in app.component.ts file

change

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

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

Thats it, It will hide the sidemenu

Answer 4

In my case what worked was to add [swipeEnabled]="false" to ion-menu. This way I can show side menu only when the menu icon is clicked. This is based on Ionic 2 documentation: Menu.

Answer 5

Based on that "swipeEnabled" option, what I did was set a conditional using a boolean variable.

<ion-menu [content]="content" [swipeEnabled]="(userLogged) ? true : false">

It worked great for me.

Just an advice: Maybe anyone notice that in case the variable is not a global one, the app will stay without the swipe even after jump to another page. However, beyond setting the variabel as global will resolve, after the user close and reopen the app, the swipe will work normally.

Answer 6

simple and best answer goes here...

In your homepage.ts,

  constructor(private menu: MenuController) { }

  ionViewDidEnter(){
    this.menu.swipeEnable(true);
  }

  ionViewWillLeave(){
    this.menu.swipeEnable(false);
  }

Which will disable swipe in all other pages except home page.