I'm looking to have the 'Edit' button only appear when I hover over a selected row. Here's the code: https://stackblitz.com/edit/inline-edit-change-edit2-j8b2jb?file=app%2Fapp.component.html
I want the 'Edit' button to show up only when I hover over an item, for example the first name in one row.
The challenge I'm facing is that I only want to see the on-hover button and not all of them at once.
<div class="form-group" [ngClass]="{'editing': editing.given_name}">
<label for="number">First Name</label>
<input
type="text"
class="form-control"
formControlName="given_name"
id="given_name"
placeholder="Jane"
/>
<div class="value">{{user.given_name}}</div>
<button (click)="toggleEdit('given_name')">Edit</button>
<button (click)="accept('given_name')">Accept</button>
<button (click)="toggleCancel('given_name')">Cancel</button>
</div>
<div class="form-group" [ngClass]="{'editing': editing.family_name}">
<label for="street">Last Name</label>
<input
type="text"
class="form-control"
formControlName="family_name"
id="family_name"
placeholder="Doe"
/>
<div class="value">{{user.family_name}}</div>
<button (click)="toggleEdit('family_name')">Edit</button>
<button (click)="accept('family_name')">Accept</button>
<button (click)="toggleCancel('family_name')">Cancel</button>
</div>