I am currently working on implementing a rating feature using Angular. This component will be used to rate different languages based on how proficient I am with them.
My issue lies in the fact that when I click on one array element, it automatically selects and fills another array element as well. I want to be able to click on just one item and have that data correctly registered without affecting other elements.
The code for the star component I am using as a base can be found in this stackblitz link:
https://stackblitz.com/edit/angular-material-star-rating-kptyy2?file=app%2Fapp%2Fapp.component.html
Below is the code snippet for my star component.
<button mat-icon-button *ngFor="let ratingId of ratingArr;index as i" [id]="'star_'+i" (click)="onClick(i+1)"
>
<mat-icon>
{{showIcon(i)}}
</mat-icon>
</button>
<mat-error *ngIf="starCount == null || starCount == 0">
</mat-error>
export class StarRatingComponent implements OnInit {
@Input("rating") private rating = 3;
@Input("starCount") public starCount = 5;
@Output() private ratingUpdated = new EventEmitter();
public ratingArr = [];
constructor() {
}
ngOnInit() {
for (let index = 0; index < this.starCount; index++) {
this.ratingArr.push(index);
}
}
onClick(rating: number) {
this.ratingUpdated.emit(rating);
return false;
}
showIcon(index: number) {
if (this.rating >= index + 1) {
return "star";
} else {
return "star_border";
}
}
}
Additionally, here is how I am trying to display and populate the language data using this component:
<div *ngFor="let language of subCategory.languages; let i = index">
<div class="col-md-8">
{{language.name}}
<app-star-rating [rating]="language.rate" [starCount]="starCount" (ratingUpdated)="onRatingChanged($event)"></app-star-rating>
</div>
</div>
onRatingChanged(rating) {
this.skills.subCategories.map(test => test.languages.filter(res => {
console.log(res.name);
res.rate = rating;
}));
}