How to set image with binding for onMouseOut on Angular button

Question

I need a button in Angular. For this button I will set a image (icon) by binding. On hover the image should change. On event onMouseOut it should set back to the binded image.

Using the event onMouseOut I get the error

NG8002: Can't bind to 'onMouseOut' since it isn't a known property of 'input'.

I tried

<button src='...
<button ..><img ...
<input type="image" ...

and get allways the same error.

How can I use the onMouseOut with binding on a angular button.

<input type="image" onclick="onUp()" 
src="/assets/icons/{{imgUp}}.png" 
onMouseOver="this.src='/assets/icons/up-hover.png'" 
onMouseOut="this.src='/assets/icons/{{imgUp}}.png'" />

score 0 · Answer 1 · answered Mar 01 '22 at 15:52

0

Create a element reference like i have created imgElem below and use it.

<input
  #imgElem
  type="image"
  onclick="onUp()"
  src="/assets/icons/{{ imgUp }}.png"
  (mouseenter)="imgElem.src = '/assets/icons/up-hover.png'"
  (mouseleave)="imgElem.src = '/assets/icons/{{imgUp}}.png'"
/>

answered Mar 01 '22 at 15:52

Aakash Garg

10,649
2
7
25

It's not working for me. – Frank Mehlhop Mar 01 '22 at 16:02
any error? can you please give the issue. – Aakash Garg Mar 01 '22 at 16:33
At the mouseleave comes a 404 and "Cannot GET /assets/icons/%7B%7BimgUp%7D%7D.png" The name of the image file is cryptic instead of "up.png" or "up-active.png". At the src -img the binding works fine. – Frank Mehlhop Mar 01 '22 at 20:42
404 means the url of image doesn't exist. make sure image is available at that url. – Aakash Garg Mar 06 '22 at 19:34

score 0 · Answer 2 · answered Mar 03 '22 at 08:27

My solution is setting the image allways with Typescript:

<input type="image" [src]="imgPathUp" (click)="onUp()" 
(mouseenter)="onUpHover()"  (mouseleave)="onUpLeave()" />

  imgUpNeutral = '/assets/icons/up.png';
  imgUpHover = '/assets/icons/up-hover.png';
  imgUpActive = '/assets/icons/up-active.png';
  imgPathUp = this.imgUpNeutral;
  currentImgUp = this.imgPathUp;
  
  
  public onUpHover(): void {
    this.imgPathUp = this.imgUpHover;
  }

  public onUpLeave(): void {
    this.imgPathUp = this.currentImgUp;
  }
  
  public onUp(): void {
    if (this.vote === VoteEnum.neutral) { // use the logic you need
      this.vote = VoteEnum.up;
      this.imgPathUp = this.imgUpActive;
    } else {
      this.vote = VoteEnum.neutral;
      this.imgPathUp = this.imgUpNeutral;
    };
    this.currentImgUp = this.imgPathUp;
  }

How to set image with binding for onMouseOut on Angular button

2 Answers2