Conditional Color change

[philipgriffin]

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.

[rapropos]

You can bind color just like any other attribute:

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

[FrancoisIonic]

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>

[FrancoisIonic]

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

[rapropos]

@FrancoisIonic

I’m not sure if it will work well inside a loop

I am, or I wouldn’t have suggested it.

@FrancoisIonic

*ngFor will not work on button for sure.

Yes it will.

fruits = ["apple", "banana", "cherry"];
<button *ngFor="let fruit of fruits; let odd = odd"
        ion-button [color]="odd ? 'primary' : 'secondary'">
  {{fruit}}
</button>

[FrancoisIonic]

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

[rapropos]

@FrancoisIonic

the question was in nested loops

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

[FrancoisIonic]

@philipgriffin

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.

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.

[anmol176]

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.

[rapropos]

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

[keshavking111]

in my Case this is not work

{{examsresult.status}}

[rapropos]

Imagine somebody had posted only what you just did and you were trying to help them with it. What further information would you need?

[keshavking111]

Thanks @rapropos for Your reply , I have solved this…

[arindam_mojumder]

LIke this.

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