CODEWITHSUNDEEP
htmlangularangular5
Shady Aziza
Shady Aziza

Reputation: 53327

Change the style of specific items inside ngFor

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?

Upvotes: 0

Views: 1020

Answers (1)

Manzur Khan
Manzur Khan

Reputation: 2486

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

}

Upvotes: 1

Related Questions