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?
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.
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With