Dynamic side menu options

Hi,
We have a requirement to populate side menu options based on logged in user. We used to do this before ionic 2. (Get that available screen options from server and populate the side menu). But in IONIC 2, it seems side menu is loading first. Is there way to restrict side menu load before login and load the side menu after user login.

quick help/suggestion is much appreciated.

Thanks,

Thanks guys.I am able to achieve this. Please let me know, if anybody need help on this.

Thanks,

Hello Rajugvb,

I would love to know how you have succeded to update your side menu …

@vptcnt, Are you still looking for this info? I apologize; I did n’t see your question.

Hello

Yes, i am. I would like to know how update the side menu after a login /
logout event for example…

Thanks for.your help

I would love to see how this is done as well.

Hi,

My use case; Side menu options are based on logged In user. I built a service to get sidemenu options from server after user login.

Below is high level steps;

Login Screen:
import { Events } from ‘ionic-angular’;
constructor:
public events: Events
after authenticating login : publish an event
this.events.publish(‘userloggedin’);

app.components.ts:
import { Events } from ‘ionic-angular’;
constructor:
public events: Events
subscribe the previously published event in constructor

add below in constructor:
this.events.subscribe(‘userloggedin’,(() => {console.log(‘event received’);
this.getMenuOptions(); // this method gets sidemenu options from server }));


may be in your use case;

different sidemenu’s before and after login

have 3 arrays:

array 1

beforeloginpages= [
{ title: ‘Page1Page’, component: Page1Page},
{ title: ‘Page2Page’, component: Page2Page},
];
array 2

afterloginpages = [
{ title: ‘Page1Page’, component: Page1Page},
{ title: ‘Page3Page’, component: Page3Page},
{ title: ‘Page4Page’, component: Page4Page},
];

// activapages array would be displayed in your app.html
activepages:[]

before login
this.activepages = beforeloginpages;

afterlogin in the event

this.events.subscribe(‘userloggedin’,(() => {console.log(‘event received’);
this.activepages = afterloginpages; }));

logout: Publish an event and switch the arrays

Please let me know, if you need any additional help

Thanks,
Raj

3 Likes