How to set background color for ion-card from value you get from Object property that has values (primary, secondary, tertiary etc)

Issue

Hello i want to set the background color for an ion-card. I am returning an Object has has a property named color and this property has values on db table the predefined colors on variables.scss (primary, secondary, tertiary, dark etc…),. The object’s name is userInterests. userInterests.color is the property that has the values (primary, secondary, tertiary)

<ion-col size="6" *ngFor="let item of usersInterest;">
          <ion-card id="card">
            <ion-avatar>
            <img [defaultImage]="defaultImage" [lazyLoad]="item.profile_pic"/>
          </ion-avatar>
            <div class="card2"><div><br /><br /><br /><br /><br /><br /><br /><br /></div>
              <div class="card-title">{{item?.first_name || item?.username }}</div>
              <div class="card-subtitle">{{item?.artisticBehaviour}}</div>
            </div>
        </ion-card>

Solution

You may want to use string interpolation to define the card’s color. Your example is slightly confusing; maybe you want item.color instead of userInterests.color.

<ion-card color="{{userInterests.color}}">
  //...
</ion-card>

Documentation: https://ionicframework.com/docs/api/card#colors

Answered By – Joosep Parts

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0