Here is an example - http://plnkr.co/edit/iwvjJcUurUW2AvkDArfz?p=preview
I would like the delete button to show up only when mouse hovers on the row and perform some function delete(name), by passing the name
How can I achieve this?
P.S I am new to Angular world
This can be quickly solved with CSS, no need to bring JS or Angular. Just using basic CSS would be in my opinion better solution. Add the following to your stylesheet:
<style>
tr i.icon-minus-sign { display: none; }
tr:hover i.icon-minus-sign { display: block; };
</style>
Andres answer is great, but I think many people who stumble upon this page will appreciate this variation:
<style>
tr i.icon-minus-sign { visibility: hidden; }
tr:hover i.icon-minus-sign { visibility: visible; };
</style>
This is better in many cases, because when using visibility:hidden, the element is still there but just invisible, so it takes up space even when it's not shown. That's why the table and cells will not change size when hovering over the row.
