[ionic 4] ion-item change with two color dynamicaly

Ionic Framework
1

HI, I found that cannot overwrite the ionic color property, for example:
[color]="odd ? ‘next’ : ‘light’ "
Ones this is set I cannot have a class selector for example:
[class.selected]=“factura.selected”
To set a second color to the Item base on the status.

By default it start with the color property but ones selected should change to the second color background; It use to work in Ionic 3 and 2.

  <ion-list lines='none'>
    <ion-item *ngFor="let factura of filteredItems | balanceCero; let odd = odd" [color]="odd ? 'next' : 'light' " (click)='select(factura)' [class.selected]="factura.selected">

    </ion-item>

Any ideas on how I can achieve this logic?

2

If you set the color to the <ion-item> Element, i think just a Ionic Color Class is added to the Item? Can you set the color to “next” and then inspect the item and check if it has a Class like ion-color-next? Then change the Class in the inspector to ion-color-light and check if the Color is updated like you want.

If this works you can add the specific Color Classes via [ngClass]

3

If you set the color to the <ion-item> Element, i think just a Ionic Color Class is added to the Item? Can you set the color to “next” and then inspect the item and check if it has a Class like ion-color-next ? Then change the Class in the inspector to ion-color-light and check if the Color is updated like you want.

YES, NEXT and LIGHT THAT PART IS WORKING AS EXPECTED

[ngClass]I will try using this instead of [class.selected]

4

If I remove the [color]="odd ? ‘next’ : ‘light’ " then [class.selected]=“factura.selected” start to work;
or using ngClass is the same problem. I cannot overwrite the css class used in property [color]

5

why don’t you only use [ngClass]?

6

because one item can be odd and selected at the same time but the selected should come first;
or even and selected
or even only
or odd only

odd and selected both classes change the background at the same time.

7

mhh i think if the order of the css classes is important to make it work, it is not a good solution :thinking:

8

I already try that; but the order is altered because of the dynamic of the classes been added and removed.

9

I would not ask the template to resolve this conflict (or to do whatever is in the balanceCero pipe, for that matter). I would hoist all that into the controller, and put a definitive styling CSS class property onto each factura.