I'm trying to build a simple dynamic rate from 0 to 5 stars (and its middle values like x.5 [example 4.5] ) that receives a value from the javascript.

I looked for something with *ngFor but I'm not understanding how that works. Can someone explain / help me?

If it helps, for ionic, we have 3 type of stars available:

<ion-icon name="star"></ion-icon>
<ion-icon name="star-half"></ion-icon>
<ion-icon name="star-outline"></ion-icon>

For example if I receive from server a value rate = 3.5, it renders:

<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-half"></ion-icon>
<ion-icon name="star-outline"></ion-icon>

I'm using javascript, no typescript.

Thank you so much :)

p.s. not sure if this title is the better, any suggestion is wele :)

I'm trying to build a simple dynamic rate from 0 to 5 stars (and its middle values like x.5 [example 4.5] ) that receives a value from the javascript.

I looked for something with *ngFor but I'm not understanding how that works. Can someone explain / help me?

If it helps, for ionic, we have 3 type of stars available:

<ion-icon name="star"></ion-icon>
<ion-icon name="star-half"></ion-icon>
<ion-icon name="star-outline"></ion-icon>

For example if I receive from server a value rate = 3.5, it renders:

<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-half"></ion-icon>
<ion-icon name="star-outline"></ion-icon>

I'm using javascript, no typescript.

Thank you so much :)

p.s. not sure if this title is the better, any suggestion is wele :)

• javascript
• angular
• ionic2
• rate
• ngfor

4 Answers 4

Here's one way to do it:

<ion-item>
  <ion-icon *ngIf="myRating>=1" name="star"></ion-icon>
  <ion-icon *ngIf="myRating>=2" name="star"></ion-icon>
  <ion-icon *ngIf="myRating>=3" name="star"></ion-icon>
  <ion-icon *ngIf="myRating>=4" name="star"></ion-icon>
  <ion-icon *ngIf="myRating>=5" name="star"></ion-icon>
  <ion-icon *ngIf="myRating%1!=0" name="star-half"></ion-icon>
  <ion-icon *ngIf="myRating==0" name="star-outline"></ion-icon>
  <ion-icon *ngIf="myRating<=1" name="star-outline"></ion-icon>
  <ion-icon *ngIf="myRating<=2" name="star-outline"></ion-icon>
  <ion-icon *ngIf="myRating<=3" name="star-outline"></ion-icon>
  <ion-icon *ngIf="myRating<=4" name="star-outline"></ion-icon>
</ion-item>

It takes up more space in the HTML, but doesn't require any additional javascript. Here, myRating is the star value. I tested it for all 11 possible values.

If you have an array like

value = ['star', 'star', 'star', 'star-half', 'star-outline'];

you can use ngFor to render your HTML like

<ion-icon *ngFor="let icon of icons" [name]="icon"></ion-icon>

or depending on what name is (property or attribute)

<ion-icon *ngFor="let icon of icons" name="{{icon}}"></ion-icon>

An alternative would be to create a function with switch case or if to return the type of the icon, to clean code html.

html:

<Ion-item>
   <Ion-icon [name]="validate(myRating)"> </ion-icon>
</Ion-item>

function:

Validate(e:string): string {
   Let res;
   if (e> 1){
     res="star";
   }
   else {
     res="star-outline";
   }

   Return result;
}

I've reached this solutions using the tips that you guys provided:

function printRating (rating) {

  let max_rate       = 5;
  let rounded_rating = Math.round(rating);
  let array_stars    = new Array(max_rate);
  array_stars.fill('star-outline');

  for(let i=0; i < rounded_rating; i++) {
    array_stars[i] = 'star';

    if(i === rounded_rating - 1 && rating % 1 !== 0) {
      array_stars[i] = 'star-half';
    }
  }

  return array_stars;
}

In my ponent I've associated to a variable the result array

this.stars = this.printRating(this.seller.rating);

And finally in the view I printed based on the result array

<ion-icon *ngFor="let star of stars" name="{{star}}"></ion-icon>

Hope this helps someone!