rating.component.ts

//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha).
import { Component, View, Input, Output, EventEmitter } from 'angular2/core';
import { CORE_DIRECTIVES, NgClass } from 'angular2/common';


@Component({
    selector: 'rating'
})

@View({
    template: `
    <span tabindex="0">
      <template ngFor [ngForOf]="range" #index="index">
        <span class="sr-only">({{ index < rate ? '*' : ' ' }})</span>
        <i  (click)="update(index + 1)" 
            [ngClass]="index < rate ? 'fa fa-star fa-lg' : 'fa fa-star-o fa-lg'">
        </i>
      </template>
    </span>
  `,
    directives: [CORE_DIRECTIVES, NgClass]
})

export class RatingComponent {
    private range: Array<number> = [1, 2, 3, 4, 5];
    @Input() rate: number;
    @Output('rating-change') ratingChange: EventEmitter<any> = new EventEmitter();

    update(value: number) {
        this.rate = value;
        this.ratingChange.next(value);
    }
}