On Hover To Show Icon ? Angular 2+

I want the button to only show up on my hover on selected row ? Here is my code : https://stackblitz.com/edit/inline-edit-change-edit2-j8b2jb?file=app%2Fapp.component.html I want t

Solution 1:

If I understand your question correctly, basically you want the buttons to appear when you hover the input field. This is very simple to do with CSS, no need for JS for that.

.form-group .buttons {
   display : none;
}

.form-group:hover .buttons {
   display : inline-block;
}

 <div class="form-group">
      
      <input placeholder="Hover over me" />

      <div class="buttons">
        <button>Edit</button>
        <button>Cancel</button>
      </div>
</div>

Solution 2:

Check on this code, Step 1: add class to edit button

<div class="form-group" [ngClass]="{'editing': editing.given_name}">
.
.
.
<button id="onToggleEdit-0" (click)="toggleEdit('given_name')">Edit</button>
.
.
.
</div>

Step 2: Add the following CSS to this component,

.form-group #onToggleEdit-0 {
    display: none;
}

.form-group:hover #onToggleEdit-0{
    display: inline-block;
} 

Add id value based on the row like how I did,

1st row -> onToggleEdit-0

2nd row -> onToggleEdit-1

etc...,,,