CODEWITHSUNDEEP
htmlcssangular
user1881845
user1881845

Reputation: 371

angular 2 to display and hide a component on mouse enter and leave

I have created a component for filter in angular 2 which I have added inside my table header. I want to display when mouse is on span and when out i want to hide 

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

But i want to display this filter component on mouse over and hide on mouse out and this should not display all the app-data-filter component i want to display it for that particular header. filter is different for each header so i should display one at a time. I don't have any idea about host listener that how can i use that here as i'm still learning angular 2 so it would be really helpful if i get some guidance or is there any other way

Upvotes: 0

Views: 3099

Answers (1)

Gili Yaniv
Gili Yaniv

Reputation: 3211

You can use the css :hover selector..

Since you didn't specify the exact structure of your html its hard for me to say how exactly you should implement it.

Lets say for this matter that you want to show the on table mouse hover, and you table class is 'my-table'.

.my-table:hover{
  th{
    display:none;
    }
}

You can read about the :hover selector here.

Edit:

If your html strauctre is something like:

<span class='my-toggle-span'>Toggle app filter!</span>

<app-filter class='my-app-filter'></app-filter>

Then your css will be 

.my-toggle-span:hover +.my-app-filter{
display:none;
}

The plus selector Selects all element that are placed immediately after it.

Edit 2: As opener requested, A javascript based solution: I don't recommend this approach and any way, Your toggle logic should be handled in your component and not in your html. 

<span class='my-toggle-span' (mouseenter)="toggle=true;"
 (mouseleave)="toggle=false;">Toggle app filter!</span>

<app-filter *ngIf="toggle" class='my-app-filter'></app-filter>

Upvotes: 2

Related Questions