Сделать отображение / скрытие элемента внутри li на mouseenter / mouseleave в Angular 5

Итак, у меня есть базовый <ul> в Angular 5, содержащий * ngFor, который заполняет своих потомков <li> на основе массива. Ничего особенного. Теперь я хочу, чтобы при наведении курсора на каждый ли становились видимыми карандаш и значок корзины. До сих пор мне удавалось отображать значки карандаша и корзины все одновременно, но это не то поведение, которое я ищу. Я хочу, чтобы пользователь мог видеть, что для каждого конкретного li.

Это мой код, адаптированный после этого 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>

Изменить на основе предложения Сакшама:

Я добавил 2 метода, mouseEnter (todo) и mouseLeave (todo), и внутри них я назначил свойство mouseOvered конкретному наведенному на него todo. Итак, мой код выглядит так:

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;
}