Displaying star rating

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 on displays colored star

class star half displays half colored star

class star display not colored star

Assuming that {{item.rating}} is 2.50. how do I manipulate that in the span class that it prints 2 colored stars, half star and 2 and half not colored star?

Answer 1

You can use ngClass to add class on the span 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

Do not you think it should be simple if 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>