Angular ngFor with ngClass

Question

I have an array with weather conditions and an arrray with icon class names with the same size as the weather conditions. I want to show the 'i' tag with the class name of the iconNames[i]. How can I do that?

<li *ngFor="let item of weather; let i = index">
  <h1>{{ item.valid_date }}</h1>
  <h2>{{ item.temp }}</h2>
  <i [ngClass]="{iconNames[i]}"></i>
</li>

Answer 1

You can use class binding for that:

<li *ngFor="let item of weather; let i = index">
  <h1>{{ item.valid_date }}</h1>
  <h2>{{ item.temp }}</h2>
  <i [class]="iconNames[i]"></i>
</li>