I want to set a font color according to the value received from the API

Issue

I want to change my font color dynamically.

<div *ngIf="clientProfileModel.patientHealthScore[0].kidneyScoreStatusByColor==='Normal'" [ngStyle]="{color:'#ff5454'}" then *ngIf="clientProfileModel.patientHealthScore[0].kidneyScoreStatusByColor==='High'" [ngStyle]="{color:'#53D8A2'}" else *ngIf="clientProfileModel.patientHealthScore[0].kidneyScoreStatusByColor==='Normal'" [ngStyle]="{color:'#fd9b4b'}" > {{(clientProfileModel.patientHealthScores[0]!=undefined &&
                  clientProfileModel.patientHealthScores[0].kidney||'')+''}}</div>

Solution

You can do one thing store your font color in the API response by modifying it.

for example (TS) :

and let's say you're fetching details from API

You just have to create one function which returns color based on your parameter like -

 this.userService.getUsers().subscribe((res: any) => {
      this.users = res;
      this.users.map((res) => {
        res.customColorForKedney = this.setColor(res.kidneyScoreStatusByColor); // call the function and passed your parameter whatever you have
        res.customColorForHeart = this.setColor(res.kidneyScoreStatusByColor);
        res.customColorForLiverscore = this.setColor( res.kidneyScoreStatusByColor);
        res.customColorForPancreas = this.setColor(res.kidneyScoreStatusByColor);
      });
      return this.users;
    });
  }

Function to set color

setColor(key) {
    let customColor;
    switch (key) {
      case 'Very High': {
        customColor = '#ff5454';
        break;
      }
      case 'High': {
        customColor = '#fd9b4b';
        break;
      }
      default: {
        // default case is for normal BP
        customColor = '#53D8A2';
        break;
      }
    }
    return customColor;
  }

In HTML file :

[ngStyle]="{'color':customColor }"

Stackblitz demo: It will surely help you. here

Answered By - Manish Patidar