@gentunian The syntax [color]="buttonColor" is property binding (where buttonColor is property of the component/page) and it’s meant to be used with properties. If you want to set it to a constant, then simply use color="danger". I would recommend you to check out this article for more details: Angular 2 template syntax.
@gentunian according to the angular syntax
<input [value]="firstName">
binds the property “value” to the result of the expression “firstName”.
“danger” (without quotes) is not an expression.
Yep, you were right. I missunderstand your post. If you were using sass variables would work:
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
myColor: #abcd00
);
<button [color]="'myColor'"></button>
Cheers,
Works fine with button:
<button [color]="myColor">OK</button>
but I wonder why it doesn’t work with navbar:
<ion-navbar *navbar [color]="myColor">
<ion-title>
Ionic 2.0.0-beta.7
</ion-title>
</ion-navbar>See this thread.
1 Like
very nice, thank you!
I have tried this for ion-list with *ngFor (CLI v2.0.0-beta.25)
<ion-list>
<ion-item *ngFor="let item of items">
<button clear>
<ion-icon [style.color]="item.enable ? 'green' : 'danger'" name="phone-portrait"></ion-icon>
</button>
</ion-item>
</ion-list>
Here is my dataset
let items = [{
name: "item 1",
enable: true
},{
name: "item 2",
enable: true
},{
name: "item 3",
enable: false
},{
name: "item 4",
enable: false
},{
name: "item 5",
enable: true
}]
In result, all my items which have property “enable” set to “true” are “green”. But all other (property “enable” to false) have the “primary” colour instead of “danger” like i put it in the else case…
Is there a trick to fix this issue ?
EDIT : i just found the trick !
Setting colour by using their name (like ‘primary’, ‘danger’…) seems doesn’t work as expected. We have to replace colour name by hexadecimal string like :
<ion-list>
<ion-item *ngFor="let item of items">
<button clear>
<ion-icon [style.color]="item.enable ? '#00CC00' : '#FF0000'" name="phone-portrait"></ion-icon>
</button>
</ion-item>
</ion-list>
It works as expected for me
Is it resolved?
Any solution for this… I’m using beta9.
In my case, putting the hexadecimal code instead of color variable name does the trick.
I,m trying to change button color/background dynamically . is it possible ??
Hi @katiikeya ,
You can change button backgroundColor like this :
<button [style.backgroundColor]="enable ? '#00CC00' : '#FF0000'">Test</button>
@gsoulie
I’ve tested, your code (using color name) work with 2.0.0-beta.35.
It may be fixed by Ionic team.
Thanks.
Hi everbody, i’m using the solution proposed by gsoulie.
But now i need to go back for that page using pop and select other option. The other option will change the color and the first option changes for the original color.
Here is my ts code:
constructor(private navCtrl: NavController) {
this.cities = [{nome:"Campinas-Pólis Prédio 23b",enable:true}, {nome:"Campinas-Pólis Prédio L5",enable:true} ];
}
pushCity(cidade) {
if(this.selectEnable != null){
this.selectEnable[0].enable=true;
}
cidade[0].enable = false;
this.selectEnable = cidade;
}
Sorry for my english
Hi people, i got it! Actionly the code above is correct, in the html i put this:
ion-item [style.color]=“city.enable ? ‘#000000’ : ‘#00CC00’”
Now, i have other question, how to disable a button?
Thanks
Thank you very much for your response. Let me provide some background that will hopefully prove helpful for others here:
Using this new helpful syntax you explained, <button [color]="myColor">Custom Color</button> we are able to use our own ConfigurationProvider that talks with our API very elegantly as such:
export class LoginPage {
private color: string;
// [...]
constructor(private configProvider: ConfigurationProvider) {
this.myColor = configProvider.getConfiguration().getConfigDetails().getColor();
}
}
This way we can change color dynamically at runtime without fiddling with any css.
Of course myColor contains a custom value (e.g. bleudefrance) as defined in app/theme/app.variables.scss as such:
$colors: (
primary: #613b99
, secondary: #0ead69
, danger: #ff422a
, light: #f8f8f8
, dark: #0c090d
, favorite: #ffc300
, bleudefrance: #3694EB
}
Only problem is that using the same approach for a navbar <ion-navbar [color]="myColor"> will not work and the navbar’s color will fall back to primary.
This looks like an ionic bug since the [color] input doesn’t propagate into the <div class="toolbar-background"></div> shadow element generated upon compilation.
My question is, is this a known bug (or a bug at all)? If yes, do you have a version ETA for a fix?
Disclaimer: We are currently still using ionic version 2.0.0-beta.10 (a version before latest I believe), so if this is resolved in beta.11 please let me know.
1 Like
To update everyone: the color attribute has been added to several components and will be in the beta 12 release. You can see the issue for this here: https://github.com/driftyco/ionic/issues/7467. It has been completed and is in the nightly release, but there are other changes that will need to be made to use the nightly.
Make sure to check the changelog when beta 12 releases for the steps to upgrade. 
2 Likes
Great to hear! Thank you for your hard work and sleek framework, ionic team .
3 Likes
Having problems changing icon color dynamically. Using ionic 2.0.0.
<button menuClose ion-item item-left detail-none *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon [name]="p.icon" item-left [color]="p.color"></ion-icon>
{{p.title}}
</button>
Where pages is an array as below:
{ title: 'Home screen', component: Page1, icon: 'home', color: 'primary' }
What am i doing wrong?
Eric
AFAIK the color attribute is currently available only for the button element, i.e. the ion-icon component doesn’t support it (yet). It will be added to the other Ionic components with the release of beta.12. Check out the following issue for more details: