Angular: Star rating with no external libraries

// app.component.tsimport { Component } from '@angular/core';@Component({  selector: 'my-app',  templateUrl: './app.component.html',  styleUrls: ['./app.component.scss'],})export class AppComponent {  title = 'Star Rating';  arr: any[] = [];  index: number = 0;  constructor() {    this.arr = [      { value: 1, color: 'black' },      { value: 2, color: 'black' },      { value: 3, color: 'black' },      { value: 4, color: 'black' },      { value: 5, color: 'black' }    ];  }  onClickItem(index: number) {    this.index = index;    this.manipulateArr(index);  }  onMouseHover(index: number) {    this.manipulateArr(index);  }  onMouseLeave() {    this.manipulateArr(this.index);  }  manipulateArr(index) {    this.arr.forEach((item, i) => {      if (i <= index - 1) {        item.color = 'green';      } else {        item.color = 'black';      }    });  }}

<!--app.component.html--><div>  <ul>    <li *ngFor="let item of arr" (click)="onClickItem(item.value)" (mouseover)="onMouseHover(item.value)"      (mouseleave)="onMouseLeave()" [style.color]="item.color">*    </li>  </ul></div><p>User Rated: {{ index }}/5</p>

// app.component.scssul li {  width: 60px;  cursor: pointer;  display: inline-block;  font-size: 80px;  &:hover {    color: green;  }}