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>

Possible duplicate of [DIsable swipe gesture of MenuController for LoginPage(any Particular Page)in IONIC2](http://stackoverflow.com/questions/37044490/disable-swipe-gesture-of-menucontroller-for-loginpageany-particular-pagein-ion) — Will.Harris, Jul 29 '16 at 08:27

sebaferreras · Accepted Answer · 2018-01-04T07:27:30.497

73

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

Disable it just on one page
Disable it on some pages (without repeating the same code over and over again)
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>

edited Jan 04 '18 at 07:27

answered Jul 29 '16 at 08:58

sebaferreras

44,206
11
116
134

What if I want to disable the swipe everywhere? I'm not gonna write a method in all my pages... – David Dahan Jul 03 '17 at 19:53
You could create a `BasePage` component, and inside that component disable the menu using the `ionViewDidEnter` lifecycle hook. Then extend that BasePage in all your pages (but you'd still need to modify all the pages to do that though)... – sebaferreras Jul 03 '17 at 20:01
1

Thanks for answering. I guess it's not a good option for at least 2 reasons: not DRY, and I can extend only one class (I already inherits from other class). The right way should be directly in HTML like the example I found: `` but it has no effect :( – David Dahan Jul 03 '17 at 20:05
1

Perfect. Your answer did it. – Hussnain Cheema Jan 27 '18 at 09:11
1

@sebaferreras Hi, this.menuCtrl.swipeEnable(false) is not working in Ionic3. But your second approach really helped me. – Arj 1411 Mar 01 '18 at 13:39
Glad to hear that the second approach helped you out @AnandRaj. May I ask why `this.menuCtrl.swipeEnable(false)` does not work on your end? Do you see any error or it just doesn't disable the swipe feature of the side menu? – sebaferreras Mar 01 '18 at 13:42
@sebaferreras thanks for your reply. It is not showing any error. It doesn't disable the swipe feature of the side menu – Arj 1411 Mar 01 '18 at 13:49
1

So glad to hear that @Riddhi :) – sebaferreras May 04 '18 at 09:44
is there option to disable swipe to open but close by swipe right to left? – Khurshid Ansari Dec 25 '18 at 13:02
1

Yes @KhurshidAnsari, that's possible but you'd need to do it manually. In the `app.component.ts` listen to the open event and enable the swiping there. Also listen to the close event, and disable the swiping there. By doing that the swiping will be enabled to close the side menu, but not for opening it. – sebaferreras Dec 25 '18 at 17:57
1

@sebaferreras you are right. I did the same. it is working fine. – Khurshid Ansari Dec 26 '18 at 04:32
Using 1st approach on Ionic 4, I always encounter 'ASSERT: can not be animating'. This is when menu toggle has router link, moving from one page to another using the menu with the code is implement would produce the said error. – niczm25 Dec 12 '19 at 02:18
To whomsoever it may concern - In ionic 4, `swipeEnable` is deprecated. You can use `swipeGesture` instead. – Mitesh Shah Dec 17 '19 at 07:20

score 3 · Answer 2 · answered Jul 29 '16 at 08:19

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

score 3 · Answer 3 · answered Jul 11 '18 at 10:07

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.

score 2 · Answer 4 · answered Aug 24 '17 at 17:46

2

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

answered Aug 24 '17 at 17:46

Apoorv

1,338
1
17
18

1

This will lead another problem as a screen is still swipeable to show a hidden menu. Mean that touch area on the left-hand side is touchable to a disappear menu. – meddlesome Sep 29 '17 at 10:52

score 1 · Answer 5 · answered Oct 02 '17 at 09:51

1

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.

answered Oct 02 '17 at 09:51

UO Man

153
4
13

score 1 · Answer 6 · answered Nov 17 '17 at 21:45

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.

Disable swipe to view sidemenu ionic 2

6 Answers6

1) Disable it just on one page

2) Disable it on some pages

3) Disable it in all the pages

Linked