import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
        <rating></rating>
     `,
  styleUrls: ['./app.component.css']
})

export class AppComponent {
}

import { Component } from '@angular/core';

@Component({
    selector: 'rating',
    template: `
        <i class="star"
        [class.star-empty-icon]="rating < 1"
        [class.star-full-icon]="rating >= 1"
        (click)="onClick(1)">
        </i>
        <i class="star"
        [class.star-empty-icon]="rating < 2"
        [class.star-full-icon]="rating >= 2"
        (click)="onClick(2)">
        </i>
    `
})
export class RatingComponent{
    rating = 0;
    onClick(ratingValue){
        this.rating = ratingValue;
    }
}

.star.star-full-icon{
    content:'X';
}
.star.star-empty-icon{
    content:'O';
}