Menu events how handle change

Ionic Framework ionic-v3
1

Hi,

I have made many search but I can’t find how handle change when the open openning or closing. I have found Output Events for components menu: ionOpen, ionClose and ionDrag here: http://ionicframework.com/docs/v2/api/components/menu/Menu/#output-events

But they have no documentation how can I add lisener or subscribe to this event.

Thanks for you help.

1 Like
2

In your app.html file

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

And then in your app.ts file you write your event handler functions

menuClosed() {
      //code to execute when menu has closed
}

menuOpened() {
     //code to execute when menu ha opened
}
6 Likes
3

Hi, thanks you for you fast reply!

It’s work well, i’ve just add Events from ‘ionic-angular’ and change code by:

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

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

And get him on other page…

Thanks you for you help you save my day!

4

That was my solution too, using the Ionic Events class. Glad to help

5

Just to save anyone else the time that I wasted, the (ionOpen), (ionClose) and (ionDrag) events were implemented in beta 8. So don’t waste time wondering why they won’t work if you aren’t using 8 or above :smiley:

(Btw if you aren’t using version 7, you can use the (opening) event explained here.)

6

“menuOpened” called, but when I updated some variable inside this method.
There is no update on menu (eg: load user name from my own provider and display it on side menu).
When I close the side menu, the variable being updated on UI.

May I know how to force update the menu ui? Thanks!

7

In my experience, any time I want to “force” something when programming, one of two things happens.

A. I figure out a way to “force” it, and six weeks later I hate myself.
B. I take a deep breath, pet my cat, rethink what I am really trying to do, and realize that “force” is antithetical to how I want to live my life.

Your move.

1 Like
8

Hope I have time to hate myself finally…

this.changeDetectorRef.detectChanges();

9

I don’t think manual change detection should be necessary here.

10

Any other solutions?

1 Like
11

Yes, you can alternatively use custom event instead of predefined. Use events by subscribing to an event from other pages and listen for that events to occur through the constructor of the page that you wanted to perform changes.

12

instead of menuOpened we now have these options :slight_smile:

ionDidClose Emitted when the menu is closed.
ionDidOpen Emitted when the menu is open.
ionWillClose Emitted when the menu is about to be closed.
ionWillOpen
2 Likes