Ionic2 + Angular2 - Dynamic Rate Value With Ion-icon Star

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 *

Solution 1:

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.

Solution 2:

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>

Solution 3:

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;
}

Solution 4:

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

functionprintRating (rating) {

  let max_rate       = 5;
  let rounded_rating = Math.round(rating);
  let array_stars    = newArray(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 component 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!