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