Ion-select-option change color based on conditional data

Question

I Have a *ngFor loop that loops through devices, the devices are connected to a real time database. My code checks to see when the device was last online and flags it as offline or online. Now for some reason "ion-select-option" is not accessible by styling it and instead gets selected in global.scss like this:

 ion-alert.
select-alert {
    --background: red!important;
    // --color: red !important;
    button {
        color: white !important;
        font-size: 20px !important;
    }

    .sc-ion-alert-md {
        color: red;
    }
}

This won't work as I need the colors to be dynamic. Below is a snippet of code where i attempted the change by having an array of colors levelColors

public levelColors: { [level: string]: string } = {
    Alert: "grey",
    online: "green",
    Level2: "blue",
    Level3: "orange",
    offline: "red",
  };

I feel the rest is self explanatory, so my question is... is there a way to color an option or should I choose a different solution?

  <ion-select [(ngModel)]="vehicleSelection" (ionChange)="onSelectChange($event)">
    <ion-select-option *ngFor="let vehicle of vehicleArray" [value]="vehicle"
      [style.color]="levelColors[vehicle.stat]">
      {{vehicle.fleet_nr}} [{{vehicle.reg_nr}}]
      {{levelColors[vehicle.stat]}}
    </ion-select-option>
  </ion-select>

gustav lotz gustav lotz · Accepted Answer · 2021-06-11T16:57:46

Figured it out, took me quite some time hopefully this can help others: So the problem is the items are getting created in the DOM and have nothing to do with the html code. To bypass this I created a click event on the ion-select and when it gets fired i access the DOM and get all the elements by class name. Another problem arises as the click event lazy loads the html element so to bypass this i simply put a quick timeout and the actual elements are loaded and stored in the variable. I thought i was done here but not yet, you have to grab the DOM element as a type or you cant edit the style of option. After that its pretty straight forward as you can put your logic and make the style change as needed.

Below is my Code:

setTimeout(function () {
  let x = window.document.getElementsByClassName('alert-radio-button alert-tappable alert-radio ion-focusable sc-ion-alert-ios') as HTMLCollectionOf<HTMLElement>
  for (let i = 0; i < x.length; i++) {
    console.log(x[i])
    x[i].style.backgroundColor = "green"
  }
}, 25);

Ion-select-option change color based on conditional data

1 Answers