Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Displaying star rating

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?

like image 392
Jennica Avatar asked Mar 08 '18 07:03

Jennica


People also ask

How do you describe a star rating?

Star classification is a type of rating scale utilizing a star glyph or similar typographical symbol. It is used by reviewers for ranking things such as films, TV shows, restaurants, and hotels. For example, a system of one to five stars is commonly used in hotel ratings, with five stars being the highest rating.


2 Answers

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>
like image 61
void Avatar answered Oct 19 '22 09:10

void


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>
like image 30
RITESH ARORA Avatar answered Oct 19 '22 09:10

RITESH ARORA