When I click on the button, I'm trying to retrieve the element id, but sometimes I don't get it. Here's the code snippet where I encounter this issue using TypeScript!
Take a look at the image below!
<div *ngFor="let item of l">
<input type="text" class="form-control">
<button (click)="getRate($event)"><i class="far fa-star" id='1'></i></button>
<button (click)="getRate($event)"><i class="far fa-star" id='2'></i></button>
<button (click)="getRate($event)"><i class="far fa-star" id='3'></i></button>
<button (click)="getRate($event)"><i class="far fa-star" id='4'></i></button>
<button (click)="getRate($event)"><i class="far fa-star" id='5'></i></button>
</div>
A method in Typescript to calculate the rate based on the star's ID.
getRate(event: Event) {
this.ratesArray.push((((event.target as Element).id as unknown) as number) * 20);
console.log((event.target as Element).id);
console.log((((event.target as Element).id as unknown) as number));
}