title: Angular: star rating
body: <p>I would like implement rating star system.  After click returns correct value of star. I have a problem with correctly displaying the selected stars. Just like in this picture, it doesn't show me 3 stars in yellow. How to change it? <a href="https://i.stack.imgur.com/PfGlE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PfGlE.png" alt="rating star"></a><strong>Component:</strong></p>
  
  <pre><code> export class RatingStarComponent implements OnInit {
    stars: number[] = [1, 2, 3, 4, 5];
    constructor() { }
    ngOnInit() {
    }
    countStar(star) {
      console.log('Value of star', star);
    }
  }
  </code></pre>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code> &lt;div class="row"&gt;
    &lt;div class="col-sm-12"&gt;
        &lt;ul class="list-inline rating-list" *ngFor="let star of stars" style="display: inline-block" &gt;
            &lt;li (click)="countStar(star)"&gt;&lt;i   class="fa fa-star "&gt;&lt;/i&gt;&lt;/li&gt; 
        &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>  .rating-list li {
    float: right;
    color: #ddd;
    padding: 10px 5px;
  
  }
  
  .rating-list li:hover,
  .rating-list li:hover ~ li {
    color: #ffd700;
  }
  
  .rating-list {
    display: inline-block;
    list-style: none;
  }
  </code></pre>
  
  <p>Any help or suggestion is welcome.</p>