Conditional Color change

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  >

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'">

Mmm, does combining both *ngFor and *ngIf works? Never tried. Something like that:

 <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>

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 :stuck_out_tongue:

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'">


@rapropos the question was in nested loops, not in a simple array of [apple, cake, cherry].

  • I see no nested loops in the OP.
  • It works in nested loops just as it does in any other situation.

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.


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:

1 Like

in my Case this is not work


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…

LIke this.

<ion-item mode=“md” [color]=“timer.action == 3 ? ‘dark’ : ‘white’”>