Dynamically Changing Menu Titles and Icons

Ionic Framework ionic-v3
1

I’m trying to dynamically alter menu titles and icons. IN my app.component.ts, I have a pages reference that details the contents of the menu.

this.pages = [
    { title: 'Login', component: LoginPage, icon: 'md-lock' },
      { title: 'Home', component: TabsPage, icon: 'md-home' },
      { title: 'Reference', component: RefPage, icon: 'md-book' },
      { title: 'Accounts', component: AccountsPage, icon: 'md-people' },
      { title: 'Add Task', component: TasksPage, icon: 'md-briefcase' },
      { title: 'Tasks', component: AllTasksPage, icon: 'md-attach' },
      { title: 'Offline', component: OfflinePage, icon: 'md-wifi' },
      { title: 'Geo', component: MapPage, icon: 'md-map' }  
    ];

I want to change titles and icons in the menu based on rules that are triggered in .ts code for any given page. I’ve tried a number of ways to get a reference to this parent pages object, but I can’t seem to get that to work. The only other thing I can think of is to create a provider and try to make the data available that way, but wanted to see if anyone else had any suggestions.

2

Try Ionic Events

1 Like
3

That did the trick! Thank you!

4

kindly mark it as solution :slight_smile: