hover an item to show div specific to it

Question

I am using *ngFor to loop & show items in deals array

   <div class="card item" *ngFor="let deal of deals; let i = index">
      <div class="card-body item-body">...</div>
    </div>

what i want to achieve, is when i am hovering div card in the html, his corresponding card-body div will be shown. its a fairly easy task using jquery, but i am failing to do it, using Angular.

i search for a solution for that, but didn't succeeded to implement it.. What is the way to achieve that?

Answer 1

you can try something like this

  <div class="card item" *ngFor="let deal of deals; let i = index">
      <div  (mouseenter) ="onHover(i)"  (mouseleave) ="onHover(-1)>
       <div *ngIf = "i == hoverIndex" class="card-body item-body">...</div>
      </div >
    </div>

in your .ts file

hoverIndex:number = -1;

and the method

onHover(i:number){
 this.hoverIndex = i;
}