<rating [(rating)]="rating"> </rating>

<div>
  <ion-icon name="star" *ngFor="let num of[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
  (click)="rate(num)" [ngStyle]="{'color': getColor(num)}">
</ion-icon>
</div>

@Input() rating: number;

@Output() ratingChange: EventEmitter<number> = new EventEmitter();

  constructor() { }

  rate(index: number){
    // function used to change the value of our rating
    // triggered when user, clicks a star to change the rating
    this.rating = index;

    this.ratingChange.emit(this.rating);

  }

  getColor(index: number) {
    /* function to return the color of a star based on what
     index it is. All stars greater than the index are assigned
     a grey color , while those equal or less than the rating are
     assigned a color depending on the rating. Using the following criteria:

          1-2 stars: red
          3 stars  : yellow
          4-5 stars: green
    */

    if(this.isAboveRating(index)){
      return COLORS.GREY;
    }

    switch(this.rating){
      case 1:
      case 2:
      case 3:
      case 4:
        return COLORS.RED;
      case 5:
      case 6:
        return COLORS.YELLOW;
      case 7:
      case 8:
      case 9:
      case 10:
        return COLORS.GREEN;
      default:
        return COLORS.GREY;
    }

  }

  isAboveRating(index: number): boolean {
    // returns whether or not the selected index is above ,the current rating
    // function is called from the getColor function.

    return index> this.rating;
  }

}

enum COLORS {
  GREY = "#E0E0E0",
  GREEN = "#76FF03",
  YELLOW = "#FFCA28",
  RED = "#DD2C00"
}

import { RatingComponent } from '../rating/rating.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage, RatingComponent ],
  schemas: []
})