Color based on value of innerHTML

Question

I'm new to web dev and need help. How do I change the color based on the value?

<mat-accordion fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px" >
      <mat-expansion-panel class="mat-elevation-z3" *ngFor="let resultSkill of ReportData; let l=index" >
        <mat-expansion-panel-header class="description"  [attr.data-target]="'#happy'+l" >
          <mat-panel-title>
            {{resultSkill.ip_title}}
          </mat-panel-title>
          <span class="button-align2" [innerHTML]="resultSkill.range1"></span>
        </mat-expansion-panel-header>
        <mat-panel-description id="happy{{l}}" class="collapse">
        </mat-panel-description>
        <p class="collapse-message"  [innerHTML]="resultSkill.text" style="font-size: 14px;"></p>
        <p class="collapse-message" [innerHTML]="resultSkill.result" style="font-size: 14px;"></p>
        <p class="collapse-message" style="text-align: center; color: #006fd2"><b>How to overcome this?</b></p>
        <p class="collapse-message" [innerHTML]="resultSkill.tips" style="font-size: 14px;"></p>
        <hr class="style5">
      </mat-expansion-panel>
      <br/>
    </mat-accordion>

CSS:
.button-align2{
    float: right;
    margin-right: 0;
    font-size: 16px;
  }

Snapshot of how should it look

Answer 1

You'd need a simple JS script inside there. Check out the snippet below or https://codepen.io/ma-henderson/pen/OJRGEqq

 const low_color = 'red'; const mid_color = 'yellow'; const high_color = 'green'; const buttons = document.querySelectorAll(".button2") for (let i = 0; i < buttons.length; i++) { if (buttons[i].dataset.skill == 'range1') { buttons[i].style.backgroundColor = high_color; } else if (buttons[i].dataset.skill == 'range2') { buttons[i].style.backgroundColor = mid_color; } else { buttons[i].style.backgroundColor = low_color; } }

 .button2{ margin-right: 0; font-size: 16px; display: inline-block; width: 100px; text-align: center; }

 <span class="button2" data-skill="range2">Some Text</span>

Answer 2

You can use pure CSS and escape the brackets in the selector and use nth-child to specify which element for changing the background color.

 [\[innerHTML\]='resultSkill.range1']:nth-child(1) { background: red; } [\[innerHTML\]='resultSkill.range1']:nth-child(2) { background: orange; }

 <span class="button-align2" [innerHTML]="resultSkill.range1">red</span> <span class="button-align2" [innerHTML]="resultSkill.range1">orange</span>