How to detect if side menu is open/closed in ionic

Question

I am using cordova-google-maps plugin with my ionic 2 app, and I want to show the menu (sidenav) on that page. Problem is for the sidenav to receive events properly I need to call map.setClickable( false ) while opening the sidenav and set it back to true when the user closes the sidenav. It seems there is an event for checking while the menu is being opened with opening, but I don't know how to track when the user closes the menu.

Answer 1

It seems new events have been added to the menu component which solves this problem. I am also using the google maps plugin and it works fine http://ionicframework.com/docs/v2/api/components/menu/Menu/

ionDrag

When the menu is being dragged open.

ionOpen

When the menu has been opened.

ionClose

When the menu has been closed.

Using these output events, in your handlers you can keep a flag for the menu if its open or not :)

Answer 2

For using ionDrag, ionOpen, ionClose in Ionic2 you must add it on the menu itself

for example modify menu in your app.html file by

<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">

After I use "Events" see doc here: http://ionicframework.com/docs/v2/api/util/Events/

For detect in my page if the menu was close or open.

Example in my app.ts

menuClosed() {
    this.events.publish('menu:closed', '');
}

menuOpened() {
    this.events.publish('menu:opened', '');
}

And in my other page

events.subscribe('menu:opened', () => {
    // your action here
});

events.subscribe('menu:closed', () => {
    // your action here
});

I hope this help