Make show/hide element inside li on mouseenter/mouseleave in Angular 5

Question

So I have a basic <ul> in Angular 5 containing an *ngFor that populates its <li> children based on an array. Nothing fancy. Now, I want that on hover over each li , a pencil and a trash icon become visible. So far, I managed to make all pencil and trash icons visible at the same time, but this is not the behavior I am looking for. I want the user to be able to see that there is an edit/delete option on each particular li.

This is my code, adapted after this Plunk: https://embed.plnkr.co/xgI5jOPI9HDUJb71RfmT/ .

<ul class="list-group">
  <li class="list-group-item" (dblclick)="editTodo(todo)" *ngFor="let todo of todosList">
     <span (mouseenter)="mouseOvered=true" (mouseleave)="mouseOvered=false">
       {{todo.text}}
       <i [className]="mouseOvered ? 'fa fa-pencil' : 'hidden'" (click)="editTodo(todo)"></i>
       <i [className]="mouseOvered ? 'fa fa-trash' : 'hidden'" (click)="deleteTodo(todo)"></i>
     </span>
  </li>
</ul>

Edit based on Saksham's suggestion:

I added 2 methods, mouseEnter(todo) and mouseLeave(todo) and inside them I assigned the mouseOvered property to the particular hovered-over todo. So now, my code looks like this:

app.component.html

...
<span (mouseenter)="mouseEnter(todo)" (mouseleave)="mouseLeave(todo)">
   {{todo.text}}
   <i [className]="todo.mouseOvered ? 'fa fa-pencil' : 'hidden'" (click)="editTodo(todo)"></i>
   <i [className]="todo.mouseOvered ? 'fa fa-trash' : 'hidden'" (click)="deleteTodo(todo)"></i>
</span>

app.component.ts

mouseEnter(todo) {
   todo.mouseOvered = true;
}
mouseLeave(todo) {
   todo.mouseOvered = false;
}

Answer 1

What you can do is add a new property mouseOvered to each object in todosList and initialize it with false.

Then, all you have to do is this:

<ul class="list-group">
<li class="list-group-item" (dblclick)="editTodo(todo)" *ngFor="let todo of todosList">
 <span (mouseenter)="todo.mouseOvered=true" (mouseleave)="todo.mouseOvered=false">
   {{todo.text}}
   <i [className]="todo.mouseOvered ? 'fa fa-pencil' : 'hidden'" (click)="editTodo(todo)"></i>
   <i [className]="todo.mouseOvered ? 'fa fa-trash' : 'hidden'" (click)="deleteTodo(todo)"></i>
 </span>
</li>
</ul>

Not sure if this is the best approach out there but it will work.