How to Hide Sidemenu on Selected Pages in Ionic Hybrid App

When we create a new Ionic app using sidemenu option, it is always visible on all pages of the demo app. In some situations when we don’t need site menu, even then it peeps in when we slide right . If we need to create an app that is having a login page to into pages, then sidemenu is not required anymore.

Let’s start from very beginning

Creating new app using following CLI command

ionic start showSideMenu sidemenu

In file www/js/app.js add any attribute in which we can pass flags true/ false. For example, in below code we will add “showSideMenu”

...
.state('app.playlists', {
    url: '/playlists',
    showSideMenu: true,
    views: {
        'menuContent': {
            templateUrl: 'templates/playlists.html',
            controller: 'PlaylistsCtrl'
        }
    }
})
...

 

Now go to www/js/controller.js then find its controller then call this attribute value which we set in app.js. After getting “showSideMenu”, we need to pass this flag value
$ionicSideMenuDelegate.canDragContent($state.current.showSideMenu);

$ionicSideMenuDelegate.canDragContent() service enable/ disable content drag feature. So we need to switch this as per requirement of a page, which we need to define in app.js in the corresponding state.

After adding our controller will look like this:

...
.controller('PlaylistsCtrl', function($scope, $state, $ionicSideMenuDelegate) {
    $scope.playlists = [
        { title: 'Reggae', id: 1 }
    ];

    $ionicSideMenuDelegate.canDragContent($state.current.showSideMenu);
})
...

 

Enable/ Disable of sidemenu may have many solutions but above is best and economic in terms of lines of code we need to do.
See you …