title: How to show one element on mouse-enter - Angular 4+
body: <p>I have a form which needs to show a cancel icon on mouse enter to the relevant element. But on mouse enter , all the cancel icons are visible. I have referred similar questions but those didn't solve my issue.
  Here are the code segments</p>
  
  <p>.html</p>
  
  <pre><code> &lt;div *ngFor='let tool of dropzone; let i=index' (mouseenter)="showIcon(i)" (mouseleave)="hideIcon(i)"&gt;
              &lt;label&gt;{{tool}}  &lt;/label&gt;&lt;/td&gt;          
              &lt;mat-icon (click)="cancel(tool,i)"&gt;
                &lt;div *ngIf="isHovering"&gt;cancel &lt;/div&gt;            
              &lt;/mat-icon&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>showIcon(tool) {
      this.isHovering = true;
      console.log(tool)
    }
    hideIcon() {
      this.isHovering = false;
    }
  </code></pre>
  
  <p>How can i display only the relevant element's cancel icon on mouse enter?</p>