Change the style of specific items inside ngFor - html

Question

I have a set of icons that are displayed using ngFor like this:
<mat-chip *ngFor="let category of categories" (click)="selected(category)" [selected]="category.selected" [matTooltip]="category.name">
<mat-icon id="iconBar"> {{category.icon}} </mat-icon>
</mat-chip>
and I am trying to change the color of one specific icon on a button press, my trial is to have this function executes when the button is pressed:
recolorRequired(){
var loopedIcon = document.getElementById("iconBar");
console.log(loopedIcon.textContent);
var requiredIcon = loopedIcon.textContent;
//recolor
}
The result of console.log(loopedIcon.textContent); is the first icon only, from my understanding that because I am using same id for multiple elements? is there a way I can obtain information about the whole icon collection from ngFor?

Answer 1

Yea it is because you are using an id in a loop, id is usually not meant to be used on multiple items, you can use a class instead.
<mat-chip *ngFor="let category of categories" (click)="selected(category)" [selected]="category.selected" [matTooltip]="category.name">
<mat-icon class="iconBar"> {{category.icon}} </mat-icon>
</mat-chip>
your function becomes
recolorRequired(){
var iconBars = document.getElementsByClassName("iconBar");
//iconBars will be an array of elements who has iconBar as class
//loop through iconBars and find the element you want
//recolor
}