Change Color of Ion-Item Dynamically

Ionic Framework ionic-v3
1

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(sub.id)" color="sub.severityLevel">
  
            <h2>{{sub.title}}</h2>
            <p>{{sub.severityLevel}}</p>
            <p>{{sub.message}}</p>
            <p>{{sub.description}}</p>
      
          </ion-item>
    </ion-item>
  </ion-list>
</ion-content>

And my $colors within my variables.scss

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

Try:

<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;
}

.html:

  ...

  <ion-list>

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

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

    ...

  </ion-list>

For example:

search-tab
search-tab750Ă—1334 83.1 KB

3

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

4

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

[color]="sub.severityLevel"
1 Like
5

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.

6

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.

7

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

1 Like
8

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