title: How to apply css class to single items in ngFor
body: <p>I have two *ngFors in which the first one displays the text names of venues and uses (mouseenter) and (mouseleave) to call functions that change the color of pins on a map below the names. The second *ngFor is for displaying map pins for each venue. The maps pin color is controlled by the [iconUrl]=&quot;iconColor&quot; in the ngfor.</p>
  <p>The problem is that when I hover over the text of the venue name, every map pin changes color, instead of just the single pin that I want to change.</p>
  <p>What would be the best way to go about this?</p>
  <p>HTML:</p>
  <pre><code>&lt;body&gt;
    &lt;div&gt;
      &lt;div align=&quot;center&quot;&gt;
        &lt;div *ngFor=&quot;let venue of mapVenues&quot;&gt;
          &lt;div class=&quot;venue-name&quot; (mouseenter)=&quot;markerHovered()&quot; (mouseleave)=&quot;markerNotHovered()&quot;&gt;
            {{ venue }}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;agm-map [latitude]=&quot;lat&quot; [longitude]=&quot;lng&quot; [zoom]=&quot;11&quot; (mapready)=&quot;markerAnimation()&quot;&gt;
        &lt;agm-marker *ngFor='let show of usersShows'
        [latitude]=&quot;show.venue.lat&quot;
        [longitude]=&quot;show.venue.lng&quot;
        [animation]=&quot;animation&quot;
        [iconUrl]=&quot;iconColor&quot;
        &gt;&lt;/agm-marker&gt;
      &lt;/agm-map&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>Typescript:</p>
  <pre><code>  markerHovered() {
      this.hovered = true;
      this.iconColor = 'https://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&amp;chld=%E2%80%A2|4286f4';
    }
  
    markerNotHovered() {
      this.hovered = false;
      this.iconColor = 'https://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&amp;chld=%E2%80%A2|FF0000';
    }
  </code></pre>