CODEWITHSUNDEEP
angularhtml-tablerow
Hamid
Hamid

Reputation: 27

angular 2 table row hover for showing buttons on hovered row

I'm stuck on getting on-mouseover event to show hidden edit button on row. Using this method, it will show all edit buttons on each row. I had this working in AngularJs 1x just because the ng-mouseenter set a the scope inside of each tr element. However, this is not the case with angular 2. 

<table>
   <tr *ngFor="let ob of objects" on-mouseover="rowHovered=true" on-mouseleave="rowHovered=false">
     <td>{{ob.name}}</td>
     <td>
        <button *ngIf="rowHovered==true">edit</button>
     </td>
  </tr>
</table>

Upvotes: 2

Views: 8243

Answers (1)

adharris
adharris

Reputation: 3661

Try storing the hovered index:

<table on-mouseleave="hoveredIndex=null">
   <tr *ngFor="let ob of objects; let index=index" on-mouseover="hoveredIndex=index">
     <td>{{ob.name}}</td>
     <td>
        <button *ngIf="index==hoveredIndex">edit</button>
     </td>
  </tr>
</table>

Upvotes: 14

Related Questions