Dynamically change color in

@gigocabrera wrote:

I'm using the ionic-conference-app to test how to dynamically change the color on the menu icons but I don't seem to get it to work. Here's what I did:

I modified the app.ts to include a color element

interface PageObj {
  title: string;
  component: any;
  icon: string;
  color: string;
  index?: number;
}

// create an list of pages that can be navigated to from the left menu
// the left menu only works after login
// the login page disables the left menu
this.appPages = [
  { title: 'Schedule', component: TabsPage, icon: 'calendar', color: 'danger', },
  { title: 'Speakers', component: TabsPage, index: 1, icon: 'contacts', color: 'primary', },
  { title: 'Map', component: TabsPage, index: 2, icon: 'map', color: 'secondary', },
  { title: 'About', component: TabsPage, index: 3, icon: 'information-circle', color: 'dark', },
];

And I tried different things on the markup app.html but nothing worked. Here are a few things I tried

<ion-icon item-left [name]="p.icon" [attr.p.color]="loggedIn ? '' : null"></ion-icon> (didn't work)

<ion-icon item-left [name]="p.icon" [ngClass]="p.color"></ion-icon> (didn't work)

<ion-icon item-left [name]="p.icon" p.color></ion-icon> (didn't work)

Any ideas?

Posts: 5

Participants: 2

Read full topic