I have developed a custom filtering component in Angular 2, which I have integrated into the table header. My goal is to show the filter when the mouse hovers over a specific span, and hide it when the mouse moves away.
<th>
<span class="headColor" >{{componentContents.dlHead}}</span>
<app-data-filter [dataObject]="responseData" [filterBy]="'storeCatelogue'"
(filteredArray)="filterByArray($event,'storeCatelogue')"></app-data-filter>
</th>
<th >
<span class="headColor">{{componentContents.titleHead}}</span>
<app-data-filter [dataObject]="responseData" [filterBy]="'title'"
(filteredArray)="filterByArray($event,'title')" ></app-data-filter>
</th>
However, I want the filter component to only display on hover and disappear when the mouse leaves. It should be specific to each header, displaying one at a time as each header has a different filter. Since I am still learning Angular 2, I am unsure about using host listeners. Any guidance or alternative approach would be greatly appreciated.