Star Rating Display

Question

I have a mobile application that prints star ratings.

Here is my code

<ion-list *ngFor="let item of ListOfitems"> {{item.rating}} <div class="stars"> <span class="star on"></span> <span class="star half"></span> <span class="star"></span> </div> </ion-list> 

class star displays color star

star star shows half a colored star

class star display is not painted star star

Assuming {{item.rating}} is 2.50. how can I manipulate the fact that in the span class it prints 2 colored stars, a half-star and 2 and half non-colored stars?

Answer 1

You can use ngClass to add a class to a range based on the value of item.rating .

 <span class="star" [ngClass]='{ on: item.rating >= 1, half: item.rating == 0.5, }' ></span> <span class="star" [ngClass]='{ on: item.rating >= 2, half: item.rating == 1.5, }' ></span> <span class="star" [ngClass]='{ on: item.rating >= 3, half: item.rating == 2.5, }' ></span> <span class="star" [ngClass]='{ on: item.rating >= 4, half: item.rating == 3.5, }' ></span> <span class="star" [ngClass]='{ on: item.rating >= 5, half: item.rating == 4.5, }' ></span> 

Answer 2

Don't you think it should be easy if the conditions

  <ion-list *ngFor="let item of ListOfitems"> {{item.rating}} <div *ngFor="let num of [1,2,3,4,5]"> <span class="star on" *ngIf="item.rating - num > 0.5"></span> <span class="star half" *ngIf="item.rating - num == 0.5"></span> <span class="star" *ngIf="item.rating == 0 "></span> </div> </ion-list>