title: How to show an icon on hover or click, again hide it on mouse out or click other list with ngFor angular 7
body: <p>I have a simple list containing few rows coming from a loop.When ever I click or hover on any rows it becomes active, again on clicking other row,current row will be active and previous will be inactive. Till now working fine.But in the row there is some icons which I need to show or hide same as active.When I hover/click, those icons will show and again hide on mouse out or click on next row.Here is the code below</p>
  
  <h2>app.component.html</h2>
  
  <pre><code>&lt;ul&gt;
    &lt;li  *ngFor="let row of groups;let i = index" [ngClass]="{'active': clickedIndex == i}" (click)="clickedIndex == i? clickedIndex = null : clickedIndex = i"&gt;&lt;span&gt;{{row.items}}&lt;/span&gt;---&gt;&lt;span&gt;Icon1&lt;/span&gt;&lt;span&gt;Icon2&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <h2>app.component.ts</h2>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
    clickedIndex: number = 0
  
  
    groups = [{ "id": 1, "name": "pencils", "items": "red pencil", "Status": [{ "id": 1, "name": "green" }, { "id": 2, "name": "red" }, { "id": 3, "name": "yellow" }], "loc": [{ "id": 1, "name": "loc 1" }, { "id": 2, "name": "loc 2" }, { "id": 3, "name": "loc 3" }] }, { "id": 2, "name": "rubbers", "items": "big rubber", "Status": [{ "name": "green" }, { "name": "red" }], "loc": [{ "name": "loc 2" }, { "name": "loc 3" }] }, { "id": 3, "name": "rubbers1", "items": "big rubber1", "Status": [{ "name": "green" }, { "name": "red" }], "loc": [{ "name": "loc 2" }, { "name": "loc 3" }] }]
  }
  </code></pre>
  
  <h2>app.component.css</h2>
  
  <pre><code>.active{
  background:red;
  color:#FFf;
  }
  </code></pre>