Conditional Color change


#1

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.


#2

You can bind color just like any other attribute:

<button ion-button [color]="condition() ? 'primary' : 'secondary'">

#3

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>

#4

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:


#5

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>


#6

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


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

#8

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.


#9

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.


#10

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