title: Change Color of every element dynamically in Star Rating
body: <p>I have implemented star rating and it works well. Now requirement is to have different color  for each star where in my star color comes from CSS and its colored as GOLD. How can I give it different colors. for example - 1st star should be red, second blue, third green and so on.. </p>
  
  <pre><code>&lt;fieldset class="rating"&gt;
      &lt;ng-container *ngFor="let star of starList"&gt;
          &lt;input type="radio" id="th {{star.id}} {{j}}" name="th_{{j}}" (click)="updateRating(star.value,kpi.kpiId)" /&gt;
          &lt;label [class]="star.class" for="th {{star.id}} {{j}}" [title]="star.value"&gt;&lt;/label&gt;
      &lt;/ng-container&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.rating {
      border: none;
      float: left;
      direction: ltr;
  }
  
  .rating&gt;input {
      display: none;
  }
  
  .rating&gt;label:before {
      margin: 5px;
      font-size: 1.25em;
      font-family: "Font Awesome 5 Free";
      display: inline-block;
      content: "\f005";
      font-weight: 900;
  }
  
  .rating&gt;.half:before {
      content: "\f089";
      position: absolute;
  }
  
  .rating&gt;label {
      color: #ddd;
      float: right;
  }
  
  .rating&gt;input:checked~label,
  
  /* show gold star when clicked */  
  
  .rating:not(:checked)&gt;label:hover,
  
  /* hover current star */ 
  
  .rating:not(:checked)&gt;label:hover~label {
      color: gold;
      cursor: pointer;
  }
  </code></pre>