Angular 6 - Change class with onmouseover on a div with ngFor

Question

I've this component with html:

    <div *ngFor='let option of options'>
      <label [ngClass]="clazz" 
         (mouseover)="clazz='highlightedOption'" 
         (mouseout)="clazz='normalOption'" 
         (click)="navigate(option)">
        {{option | uppercase}}
        <br/>
      </label>
    </div>

Here options is an array ['x', 'y', 'z'] defined in the typescript of the same component.

The problem is, on hover, the class (or clazz) changes for all the three divs that get generated from *ngFor. I expect the class to change only for the hovered div.

I want to understand how to use (mouseover) with *ngFor, and change the class like this. Am I doing something wrong here?

Answer 1

You can prepare an array, if you plan to add the class to only one div, something like below:-

<div *ngFor='let option of options; let i = index'>
  <label [ngClass]="clazz[i]" 
     (mouseover)="clazz[i]='highlightedOption'" 
     (mouseout)="clazz[i]='normalOption'" 
     (click)="navigate(option)">
    {{option | uppercase}}
    <br/>
  </label>
</div>

---

As a side note, you may also build a directive which could perform your desired functionality.