Hi guys,
Like you know you can add color to a button
<button positive>Test</button>
And, you can add an icon to an item
`<ion-item>
<icon cube item-left></icon>
item 1
</ion-item>`
Now, I would like to be able to dynamically change the button color or the icon type. Something like:
<button {{ newColor }}>Test</button>
and
<icon {{ newIcon }}></icon>
What is the solution for that problem?
Maybe NgClass? I tried and could not make it work. 
Thanks in advance
Right now the way to do it is:
<button [attr.newColor]="addAttribute ? '' : null">Test</button>
So if addAttribute evaluates to true it will add the newColor attribute, and if it evaluates to false it won’t add the attribute at all. The conference app has an example here using the mode: https://github.com/driftyco/ionic-conference-app/blob/master/www/app/session-list/session-list.html#L1
<ion-list [attr.no-lines]="isMD ? '' : null">
I have an open issue on Angular’s repo for this to possibly be simplified:
@brandyshea this is a good to know, but not sure I can apply that for my code.
What about if it is embedded within a *ng-for? Something like (here I am talking about ):
<ion-list inset>
<ion-header><h5>{{ siteName }}</h5></ion-header>
<ion-item *ng-for="#menu of menus" (click)="menuSelected(menu)">
<icon [attr.menu.menuIcon]="true ? '' : null" item-left></icon>
{{ menu.name }}
<span item-right>
<button clear>{{ menu.quantity }}</button>
</span>
</ion-item>
Thanks
Great question! I forgot about that use case. I added a comment on that issue to the Angular team to find out. 
Hi @brandyshea,
Did you get any info on that one?
The Angular team is not going to be implementing a way to dynamically add attributes, but we are working on adding a way like:
<button [color]="myColor">
I just want to add something about <icon>.
You can do what the doc is suggesting and it is working just fine <icon [name]="newIcon">
Hi @brandyshea,
Is there a way to change the icon on click.
@icarus_31 oh I thought you were talking about changing the color of the icon dynamically, sorry! Yes, changing name will dynamically change the icon, and I believe we will be adding a color attribute. Keep an eye on this issue for everything icons:
https://github.com/driftyco/ionic2/issues/855
@AishApp Ideally you should be able to but I don’t see it working so I filed an issue:
Thanks @brandyshea. Waiting for it to work 
Hi @brandyshea,
I’m trying to change ionic 2 buttons colors dynamically in a way that you suggested above:
<button [attr.outline]="!item.subscribed ? '' : null">
but it doesn’t work as expected. I have the next markup when my condition is TRUE:
<button class="disable-hover button button-default" outline="">Subscribe</button>
and it doesn’t change the color of the button. I can solve this issue with ngClass approach but I think this is not a good way. Does ionic have some issues for now with [attr.outline]="!item.subscribed ? '' : null" or I’m doing something wrong?
I have latest ionic bundle:
Cordova CLI: 5.4.1
Ionic Version: 2.0.0-alpha.51
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS: Distributor ID: Ubuntu Description: Ubuntu 15.10
Node Version: v4.2.6
Thanks in advance!
This is definitely a bug, I created an issue for it:
Thanks for the quick reply @brandyshea,
Waiting for the fix.
For posterity if others come across this thread: The method to change button colors proposed in December by @brandyshea works on Ionic 2.0.0-beta.0.
<button [color]="myBool ? 'secondary' : 'danger'"></button>
<button [color]="mycolor">Test</button>
seems not to be working in beta.3
Is this already implemented/functional?
It’s also not working in beta.4 either. Looks like it may not be at the top of their priority list, which stinks, as I am unable to implement a whole section of my app without it.
@mpaland @jbardi This is fixed in beta.3 - check out this plunker demo . I guess that the problem is that you’re either not correctly setting the attribute or you haven’t declared the color that you’re using. Also make sure to use color names defined in the $colors list in app.variables.scss (or add custom colors there) as shown in the example below:
// test.ts
// ...
export class TestPage {
myColor: string;
constructor() {
// Invalid - it should be a name of a color as defined in the $colors list.
//this.myColor = '#123456';
// This won't work either, unless it's declared in the $colors list.
//this.myColor = 'nonexistent';
// This works as expected.
this.myColor = 'secondary';
// This works too, when it's declared in the $colors list.
this.myColor = 'facebook';
}
// ...
}
<!-- test.html -->
<button [color]="myColor">Custom</button>
// app.variables.scss
// ...
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
// ...
facebook: #3B5998,
google: #DF4A32,
twitter: #53A7E8
);
@iignatov, thanx for giving further explanation.
I have custom colors and can’t use predefined scss vars.
What I tried is to set this.myColor to ‘red’ or to ‘#FF0000’.
This is not working.
In fact, and that’s maybe what @jbardi is looking for, you can use:
<button [style.color]="myTextColor" [style.background-color]="myBgColor">Custom</button>
That is working as expected and assigning the value of the var to the according style attr.
At least this is possible with beta.4.
@mpaland With custom colors the obvious choice is [style.background-color] as you already mentioned.
AFAIK the button’s color attribute in Ionic 2 is intended to be used only with names of colors defined in the $colors list in app.variables.scss. The fact that it’s not working with color values is not a bug, it’s a design decision. And this makes sense because its goal is not to save a few keystrokes (compared to using [style.background-color]) but to allow the use of predefined colors (i.e. the ones from the $colors list) which are otherwise not easily accessible in the code.
I guess that the docs should be updated to clarify this.
It won’t work if you dont add quotes to myColor, i.e.:
This will work:
<button [color]="'danger'"></button>
this won’t work:
<button [color]="danger"></button>