Change Color of Ion-Item Dynamically

So I have an array of items and I want to color the ion-item dynamically in the list by the value of sub.severityLevel that is within each item. The data for the items within the array come from a mysql server that I get through a rest api. I want to check the severity level of the item which can be a number between 1-5 and then based on that value set the color of the ion-item to reflect that severity level. I have tried this but it does not change the color. The value is there cause when I call it within a header it shows it but I don’t know how to get the color attribute to accept it.

<ion-content padding>
  <ion-list inset>
    <ion-item *ngFor="let alert of alerts">
        <ion-item *ngFor="let sub of alert" (click) = "alertInfo(" color="sub.severityLevel">

And my $colors within my variables.scss

  1: #ba3232,
  2: #ba6f32,
  3: #ffff00,
  4: #915bb7,
  5: #008080
1 Like


<ion-item ... color="primary">

For example, .scss:


$blue:       #488aff;
$green:      #4DB6AC;
$red:        #f53d3d;
$gray:       #f4f4f4;
$black:      #000000;


$colors: (
  primary:    $blue,
  secondary:  $green,
  danger:     $red,
  light:      $gray,
  dark:       $black


.ion-icon-call-to-action {
  background-color: $yellow;




    <!-- Verified Venues -->
    <button ion-item *ngFor="let item of items" (click)="openPage(item)">
      <ion-icon item-start name="{{item.icon}}" color="primary"></ion-icon>

    <!-- Local Venues -->
    <button ion-item class="ion-icon-call-to-action">
      <ion-icon item-start name="fa-fas-trophy" color="primary"></ion-icon>



For example:

I phrased my question really bad, I’m trying to have each item of the list’s color be determined dynamically by the value of sub.severityLevel

Found out you have to put brackets around the attribute for you to change it dynamically. Code works now.

1 Like

Phrased like that, aren’t you now setting the items color to 1, 2, 3, 4 or 5? How is that setting each items color? Just curious as to if you have more code that makes this issue solved or if you need more input.

Maybe I misunderstood and severityLevel is a string based on those numbers, which makes sense.

I set up identities for those colors in my variables.scss to represent those colors. I know those are terrible names but I was mostly just testing out how to change the items color dynamically and now I know how to do such. Those numbers each represent the severity level which is represented by a color.

I figured you either had something like that set up or still needed a hand. Glad you got your fix.

1 Like

I now see I missed a crucial element in your original post…