star-rating.component.html

<i>{{ displayText }}</i>
<div class="stars" [ngClass]="{ disabled }">
  <ng-container *ngFor="let rating of ratings">
    <svg
      title="{{ rating.text }}"
      height="25"
      width="23"
      class="star rating"
      [ngClass]="{ selected: rating.stars <= value }"
      (mouseover)="displayText = !disabled ? rating.text : ''"
      (mouseout)="displayText = ratingText ? ratingText : ''"
      (click)="setRating(rating)"
    >
      <polygon
        points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"
        style="fill-rule:nonzero;"
      />
    </svg>
  </ng-container>
</div>