Apply class to specific element inside ngFor - html

Question

I have a loop that generate names + icon.
I would that icon only shows on hover.
<div class="elm" *ngFor="let element of callWorkflowData?.jobsList">
<mat-card (mouseover)="hover=true" (mouseleave)="hover=false">{{element}}
<mat-icon [ngClass]="hover?'show-icon':'hide-icon'" ng aria-hidden="false" aria-label="Example home icon">add</mat-icon>
</mat-card>
</div>
Actually the icon became visible on all cards list when I hover only one element.
I would that the icon shows only on the hovered element

Answer 1

In your original code, the same condition applies to the class binding of all icons. That is why they all change at the same time.
You could define a hoverElement property in the component class. It would be set to the hovered element on mouseover and reset on mouseleave. The class binding condition would check if the element variable corresponds to that hoverElement:
<div class="elm" *ngFor="let element of callWorkflowData?.jobsList">
<mat-card (mouseover)="hoverElement = element" (mouseleave)="hoverElement = null">{{element}}
<mat-icon [ngClass]="hoverElement === element ? 'show-icon' : 'hide-icon'" ...>add</mat-icon>
</mat-card>
</div>
See this stackblitz for a demo.
Please note that the same result can be achieved with only CSS and the :hover selector:
mat-card mat-icon {
color: orange;
}
mat-card:hover mat-icon {
font-weight: bold;
color: darkgreen;
}
See this stackblitz for a demo.