How to change color using ngFor in ionic?-CodePudding

I want to change the color of card from a list using ngFor. I have also tried using curly braces for attribute.

    <ion-card *ngFor="let color of color_pallet">
    <ion-card-header>
      <!-- <ion-card-subtitle>Card Subtitle</ion-card-subtitle> -->
      <ion-card-title [ngStyle]="{'background':color }" style="color:#ffffff;">{{color}}
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
    </ion-card-content>
  </ion-card>

CodePudding user response：

You can wrap your text color in the same ngStyle like this:

[ngStyle]="{ background: color, color: '#fff' }"

As for answering your question it looks fine to me - is 'color' definitely a string?

You also don't need to wrap background in quotes - only if it's a style selector that has a hyphen in it i.e. 'text-decoration'

CodePudding user response：

My mistake, instead of applying color on card I was applying on title. Just now I found that I can apply ngFor on the same tag where I mention it.

<ion-card *ngFor="let color of color_pallet" [ngStyle]="{'background':color }">
    <ion-card-header>
      <ion-card-title style="color:#ffffff;">{{color}}
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
    </ion-card-content>
  </ion-card>

Thank you all.