Change Ionic2 Side menu items asynchronously

Question

I am creating an Ionic 2 app in which the side menu items are to be loaded asynchronously. The items in the side menu will change on each and every page. As of now I have started a new Ionic 2 project with the side menu template.

The problem that I am facing is once the items are loaded in side menu, I am unable to change those items in another page.

My side menu design code is in app.html file and the list of items is in app.component.ts file. When the app loads, the items are listed in side menu but when I move to another page I am unable to change those same items.

Is there any way to change it?

Answer 1

I had faced similar situation in one of my projects and used Events from 'ionic-angular' to implement dynamic side-menu functionality.

You can subscribe for a event, say "UPDATE_SIDE_MENU", in constructor of app.component.ts file using:

events.subscribe("UPDATE_SIDE_MENU", (eventData) => {
   //Logic to update Side-menu 
});

And whenever you move to another page, where you need to update the side menu, you can publish event in that page(usually in ionViewWillEnter function) using:

 events.publish("UPDATE_SIDE_MENU", "some event related data")

which will be received in your app.component.ts file and there you can implement code to update the side menu.