I have a dynamic list of items that is painted using an ngFor. I need the button to remove items from the list to be displayed only when hovering over the item. But only that of that element. Currently displayed in all on hover.
HTML:
<div>
<label>Selected Hotels:</label>
<md-list *ngFor="let item of selectedItems">
<md-list-item class="result-list" (mouseover)="over()" (mouseleave)="leave()">
<h4 md-line>{{item.name}}</h4> <button class="button-delete" md-icon-button (click)="removeFromList($index, item)" *ngIf="showDeleteButton"><md-icon>highlight_off</md-icon></button>
</md-list-item>
</md-list>
</div>
Component:
over() {
this.showDeleteButton = true;
}
leave() {
this.showDeleteButton = false;
}
removeFromList(index, item) {
// Otras operativas con item...
this.selectedItems.splice(index, 1);
}
You almost get the solution. You should pass to the mouseover and mouseleave methods the item that is being executed in the for and delegate to the item whether its button is hidden or not.
removeFromList(index, item) { // Other operations with item... this.selectedItems.splice(index, 1); }