title: Hover a div with NgClass
body: <p>I am trying to make a hover effect on a div with a Angular ngClass directive. In the template file I have a div element with class "list-item-container' which contains a div with class "list-item" that is iterated with a *ngFor directive. Inside the "list-item" div element I have three divs with class "list-item-column" which are placed horizontally like a table row with inline display. in the div with "list-item" class I have placed a mouseenter and mouseleave event listeners which calls hoverListItem() in my .ts file.  the hoverListItem() function changes the value of listItemHovered variable to true or false. In the "list-item" class I have a ngClass directive which triggers a css class 'list-item-highlight' based on the value of listItemHovered boolean value which then changes to background to a different color. </p>
  
  <p>The problem I'm facing is that upon hovering mouse pointer on the "list-item" div all my "list-item" divs are affected instead of the one I am hovering over. How to solve this problem?</p>
  
  <p>.html file</p>
  
  <pre><code>&lt;div class="list-item-container"&gt;
        &lt;ng-container *ngFor="let opportunity of dealService.opportunities"&gt;
          &lt;div [ngClass]="{'list-item-highlight': listItemHovered}" class="list-item" (mouseenter)="hoverListItem()"
               (mouseleave)="hoverListItem()"
               (click)="selectOpportunity(opportunity)"&gt;
            &lt;div
              class="list-item-column"&gt;{{opportunity.account?.name === null ? "N/A" : opportunity.account.name}}&lt;/div&gt;
            &lt;div class="list-item-column"&gt;{{opportunity.requirementTitle}}&lt;/div&gt;
            &lt;div class="list-item-column"&gt;{{opportunity.salesValue | number: '1.0-2'}}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/ng-container&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>.css file</p>
  
  <pre><code>.list-item-container{
    overflow: auto;
    width: 100%;
    max-height: 500px;
  }
  .list-item{
    font-size: 15px;
    border-radius: 10px ;
    margin-top: 5px;
    height: 50px;
    background: lightgray;
    color: black;
  }
  
  .list-item-highlight{
    background: #7e00cc;
    color: white;
  }
  
  .list-item-column{
    height: inherit;
    vertical-align: center;
    display: inline-block;
    width: 33.33%;
    padding-left: 40px;
  }
  </code></pre>
  
  <p>.ts file</p>
  
  <pre><code> hoverListItem() {
      this.listItemHovered = !this.listItemHovered;
    }
  </code></pre>