Ionic 4 update ion-item background programmatically

Question

I have something like this:

<ion-item>
     <ion-label class="ion-text-center">{{variable}}</ion-label>
</ion-item>

I need to be able to set the background of the ion-item to a colour anywhere between red and green based on the program results, so I am generating a value "{'background-color':'rgb(#,#,0)'}" in the page.ts.

I am unable to use [ngStyle]="{'--ion-background':'rgb(#,#,0)'}" as when the value changes ionic has already expanded the html into its item-native component. I need to be able to access item-native somehow with [ngStyle] or ng-style or maybe something like [.item-native background]?

Or are there easier/better ways to do this?

Answer 1

Set the background of item and the item-native class to transparent using css4 variable; and then set the background style of the ion-item using [ngStyle] depending on the boolean value returned. Example below

.item {
  --background: transparent !important;
}

.item .item-native {
   --background: transparent !important;
}

Then the HTML will look thus:

<ion-item [ngStyle]="{'background':(true)?'#32db64':'#f53d3d'}">
  <ion-label class="ion-text-center">{{variable}}</ion-label>
</ion-item>

Answer 2

I managed to do it this way:

My function sets a variable in the page.ts to this object: {'background-color':'rgb(' + function + ',' + function + ',0)'}

HTML:

<div [ngStyle]="bgColVar">
  <ion-item class="transparentbg">
    <ion-label class="ion-text-center">{{variable}}</ion-label>
  </ion-item>
</div>

SCSS:

.transparentbg{
    --ion-background-color: transparent;
}

I wrap the whole thing in a regular div and set its background dynamically while having the ionic elements background transparent.