(mouseenter) event on individual item in *ngFor - angular 4

Question

So my goal is to create a mouseenter/mouseexit event for an individual li's child elements. For my app, when a user mouseenters an li elememt, it's child element div class='thumbs' is added to the DOM through a component boolean property called "hover" -- *"ngIf='hover'"

My problem is, when I mousenter over an indivual li elememt, all the thumb icons are shown instead of the just the individual li's thumb icons.

Here is a video higlighting my problem:

HTML:

<ul> <!-- Each song on the album -->
    <li class="song-block"
        *ngFor='let song of songsToDisplay'
        (click)="getSong(song)"
        (mouseenter)="hoverStateIn()"
        (mouseleave)="hoverStateOut()">
      <div class="song-card"
           (click)="addPlay(song)">
        <p *ngIf="!song.isPlaying"
            class="song-number">{{song.tracknumber}}</p>
        <i *ngIf="song.isPlaying" class="fa fa-play"></i>
        <p class="song-name">{{song.name}}</p>
        <p class="song-length">{{song.length}}</p>
        <div class="thumbs"
             *ngIf="hover"> <!-- Thumbs section -->
          <i class="fa fa-thumbs-up"></i>
          <i class="fa fa-thumbs-down"></i>
        </div>.....
     </ul>

TypeScript:

hover: boolean = false;

  hoverStateIn(){
    this.hover = true
  }

  hoverStateOut(){
    this.hover = false;
  }

Verne

Answer 1

You can simply set the hover boolean value to individual item of the *ngFor.

<ul>
  <!-- Each song on the album -->
  <li class="song-block"
      *ngFor='let song of songsToDisplay'
      (click)="getSong(song)"
      (mouseenter)="song.hover=true"
      (mouseleave)="song.hover=false">
    <div class="song-card"
         (click)="addPlay(song)">
      <p *ngIf="!song.isPlaying"
         class="song-number">{{song.tracknumber}}</p>
      <i *ngIf="song.isPlaying" class="fa fa-play"></i>
      <p class="song-name">{{song.name}}</p>
      <p class="song-length">{{song.length}}</p>
      <div class="thumbs"
           *ngIf="song.hover">
        <!-- Thumbs section -->
        <i class="fa fa-thumbs-up"></i>
        <i class="fa fa-thumbs-down"></i>
      </div>.....
</ul>

Pedalfer

that was exactly what i need thank you. can't believe I missed that – Verne

Answer 2

A bit late, but hope it would be useful.

Using template reference variable is a quick simple way.

<div #hoverField></div>

<li (mouseenter)="hoverField.style.display = 'block';
    (mouseleave)="hoverField.style.display = 'none';>
</li>

Full code like this:

<ul> <!-- Each song on the album -->
    <li class="song-block"
        *ngFor='let song of songsToDisplay'
        (click)="getSong(song)"
        (mouseenter)="hoverField.style.display = 'block';"
        (mouseleave)="hoverField.style.display = 'none';">
      <div class="song-card"
           (click)="addPlay(song)">
        <p *ngIf="!song.isPlaying"
            class="song-number">{{song.tracknumber}}</p>
        <i *ngIf="song.isPlaying" class="fa fa-play"></i>
        <p class="song-name">{{song.name}}</p>
        <p class="song-length">{{song.length}}</p>
        <div class="thumbs"
             #hoverField> <!-- Thumbs section -->
          <i class="fa fa-thumbs-up"></i>
          <i class="fa fa-thumbs-down"></i>
      </div>.....
 </ul>

Wartime

Answer 3

Another option is to create an additional component and pass in the content with property binding. Then you can handle the mouseenter and mouseleave events in that component. I've created a quick Stackblitz to demonstrate. In this example, I use the css hover to highlight the selected song:

https://stackblitz.com/edit/angular-w2svsv

Rangel

How is this component called, and the event handling? – Earthman