Disable the side menu's swipe to open gesture

Question

I'm new to Ionic 2 & Angular2 and I have downloaded a new Ionic template with the following command

 Ionic start appname sidemenu --v2 --ts

For this particular solution I have added a login page to validate a user. Once the validation succeeds the user will be navigated to the menu page which uses the side menu.

As the solution is based on the sidemenu template, the side menu is showing on the login page whenever the user swipes left.

So can somebody please guide me to rectify this mistake and stop the side menu from showing when the view is swiped.

My code

App.ts file

import {App, IonicApp, Platform,MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
import {ListPage} from './pages/list/list';
import {HomePage} from './pages/home/home';


@App({
  templateUrl: 'build/app.html',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {
  // make HelloIonicPage the root (or first) page
  rootPage: any = HomePage;
  pages: Array<{title: string, component: any}>;

  constructor(
    private app: IonicApp,
    private platform: Platform,
    private menu: MenuController
  ) {
    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage }
    ];
  }

  initializeApp() {
    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.
      StatusBar.styleDefault();
    });
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.component);
  }
}

app.html file

  <ion-menu side-menu-content drag-content="false"   [content]="content">

  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="#p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

Homepage.ts file (login page in this case).

   import {Page, Events,Alert,NavController,Loading,Toast,Storage,LocalStorage,SqlStorage} from 'ionic-angular';
import { FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl } from 'angular2/common';
import {HelloIonicPage} from '../hello-ionic/hello-ionic';
import {NgZone} from 'angular2/core';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

 public Uname :string;
 public usrvalid:boolean;
 public usrpwd :boolean;
 public usrpwdlength:boolean;
 public usrvalidlength:boolean;
 public isUnchanged:boolean;
 public usrpwdzero:boolean;
 public usrvaliddigits:boolean;
 rootpage:any;

public Upwd:string;
  constructor(public nav:NavController) {
this.nav=nav;
this.isUnchanged=true;
var mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");

// rootPage: any = HomePage;

  }
}

Answer 1

I think the drag-content directive is used in ionic 1, for Ionic 2 what you can do is disable it from within your page class file.

You can do this by importing the MenuController provider from ionic-angular and then call the .swipeEnable(shouldEnableBoolean, menuId) method to disable the swipe gesture within your page's class (this is also documented here).

Your login controller should be something like this...

import {Page, MenuController} from 'ionic-angular';

@Page({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    constructor(public menu: MenuController) {
        this.menu.swipeEnable(false);
    }
}

If you have multiple menus and each one has an id then you can target a specific menu like this...

this.menu.swipeEnable(false, `menuId`);

Answer 2

You can disable/enable sidemenu at any time at any page by calling

$ionicSideMenuDelegate.canDragContent(false)

e.g:

angular.module('ABC').controller('xyzCtrl', function($scope, $ionicSideMenuDelegate) {

$ionicSideMenuDelegate.canDragContent(false)

});