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


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">
            <img [defaultImage]="defaultImage" [lazyLoad]="item.profile_pic"/>
            <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>


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


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

Leave a Reply

(*) Required, Your email will not be published