import {Component,EventEmitter} from '@angular/core';
import {NgFor, NgClass} from '@angular/common';

@Component({
  selector: 'rating',
  inputs: ['rate'],
  outputs: ['updateRate: rateChange'],
  template: `<span tabindex="0">
      <template ng-for [ng-for-of]="range" #index="index">
        <span class="sr-only">({{ index < rate ? '*' : ' ' }})</span>
        <i class="fa" (click)="update(index + 1)" [ng-class]="index < rate ? 'fa-star' : 'fa-star-o'"></i>
      </template>
    </span> `
 
})
export class Rating {
  private range:Array<number> = [1,2,3,4,5];
  private rate:number;
  private updateRate:EventEmitter <any>= new EventEmitter();
  
  update(value) {
    this.rate = value;
    this.updateRate.next(value);
  }
}