I have a button like so
<button color="weakRed" no-lines detail-none *ngFor="let exercise of exercises; let odd=odd; let even=even;" ion-item >
{{exercise}}
</button>
I am looking to have a conditional statement to change the color from weakRed to strongRed based on the odd and even variables in the *ngFor.
I have used ngClass for this but it does not change colors as nicely. For example if I use ngClass and I click on the item the click effect changed the item to a grey color. With using ācolorā it handles changing all of this.
1 Like
You can bind color just like any other attribute:
<button ion-button [color]="condition() ? 'primary' : 'secondary'">
13 Likes
Mmm, does combining both *ngFor and *ngIf works? Never tried. Something like that:
<ion-list>
<button *ngIf="let exercise ==!undefined; let even=even;">
<ion-item *ngFor="let exercise of exercises; let odd=odd; let even=even;">
<button color="weakRed" no-lines detail-none>
<ion-item>
{{exercise}}
</ion-item>
</button>
</ion-item>
<ion-list>
and @rapropros thing will sure work, itās plain Angular. Iām not sure if it will work well inside a loop of ngIf thought (full on ionic ui components). As a side note, *ngFor will not work on button for sure. I update my code above.
Something is still wrong with this code, but it should more or less display the funk of it 
I am, or I wouldnāt have suggested it.
Yes it will.
fruits = ["apple", "banana", "cherry"];
<button *ngFor="let fruit of fruits; let odd = odd"
ion-button [color]="odd ? 'primary' : 'secondary'">
{{fruit}}
</button>
3 Likes
@rapropos the question was in nested loops, not in a simple array of [apple, cake, cherry].
Sorry @rapropos, but unless the original question drives to some form of conditional statement in the template view, Iām sure and fully sure,I totally misunderstood the initial question.
Hi,
I would like to know if its possible to apply 3 colors to it? I have a condition where if status==0, the color should white, if status==1, the color should be green and if status==2 the color should be red.
Do you know how I may be able to achieve this?
It works fine with [color]=āstatus==1 ? āsecondaryā : ālightāā
but I want to include another color depending on the value of the condition.
You could probably nest the ternary operator: q1 ? (q2 ? a : b) : c), but thatās not very readable. What I would do is to put an array of colors in the controller:
colors=['white', 'green', 'red'];
ā¦and then just use that:
[color]="colors[status]"
1 Like
in my Case this is not work
{{examsresult.status}}
Imagine somebody had posted only what you just did and you were trying to help them with it. What further information would you need?
Thanks @rapropos for Your reply , I have solved thisā¦