0

I am using Bootstrap 4 on Angular 6, and I have a delete button that should change its icon when the mouse enters the button. However, I have tried several of these ng functions (ngMouseOver, ngMouseUp, etc.) and none of them have worked.

Here is the code:

component.html

<button type="delete" class="btn" (click)="delTr(tr)" ng- 
mouseenter="buttonHover()"><i class="{{ButtonIcon}}"></i></button>

component.ts

ButtonIcon: String = "far fa-trash-alt";

...

buttonHover()
{
  console.log("Mouse Enter works.") 
  this.ButtonIcon = "fas fa-trash-alt"
}

The console log does not output anything when the program runs, so the method buttonHover() is not being activated.

Also, the button icon "far fa-trash-alt" works as intended. Any help would be appreciated.

HDJEMAI
  • 9,436
  • 46
  • 67
  • 93
Danchat
  • 137
  • 2
  • 12
  • [Look at angular-2-hover-event](https://stackoverflow.com/questions/37686772/angular-2-hover-event) – HDJEMAI Jun 01 '18 at 22:45

1 Answers1

3

That is the AngularJS way - from what you said, you're using Angular(v6) so you should do it the Angular way:

<button type="delete" class="btn" (click)="delTr(tr)" (mouseenter)="buttonEnterHover()" (mouseleave)="buttonLeaveHover()"> YourBtn </button>

Another option would be to use the mouseover event:

<button type="delete" class="btn" (click)="delTr(tr)" (mouseover)="buttonHover()"> YourBtn </button>

Each method has its Pros and Cons, here is the Docs to help you decide which one best suites you.

Narm
  • 10,677
  • 5
  • 41
  • 54
  • Thanks for the help, I had completely forgotten about the parentheses around the method name when in HTML. – Danchat Jun 04 '18 at 15:16