Add click event to image in Angular 4

Question

I need to add a click event to image in angular component. I tried:

<img src="../../assets/add.svg" width="18" height="18" (click)="addItem()"> 

but this does not work. If put image inside button like this:

<button type="button" class="btn_img" (click)="addItem()">
  <img src="../../assets/add.svg" width="18" height="18"> 
 </button>

It looks like a button with an image inside, I do not want this, I want it to look like:

<img src="../../assets/add.svg" width="18" height="18"> 

but that works like:

<button type="button" class="btn_img" (click)="addItem()">
  <img src="../../assets/add.svg" width="18" height="18"> 
 </button>

How I can get this, how do you do this in angular?

Answer 1

You can see a working example here with all the possible ways:

https://stackblitz.com/edit/angular-kvsjre?file=src%2Fapp%2Fapp.component.html

If you like Use a < div > wrapper or an anchor < a > or an image

Good luck

Answer 2

you can the click im image this way

in your view create img and input

<img [src]="image" alt="" class="image-exercise" (click)="selectFile.click()">
<input type="file" (change)="getImage($event)" style="display: none" #selectFile>

and your component create the function to save your image

getImage(ev) {
   console.log(ev.target.files[0]);
}

Answer 3

<img class="image" src="../../assets/add.svg" width="18" height="18" (click)="addItem()">

and add following class to your css file

.image {
   cursor: pointer;
}

Answer 4

some.component.html

<div >
    <img [src]="ImagePath" (click)="ImageClick()"/>
</div>

some.component.ts

export class SomeComponent implements OnInit {
    ...
    ...
    ImagePath = 'path goes here';

    ImageClick() {
        this.ImagePath = 'updated path goes here';
    }
}

Answer 5

I had a similar issue. It would work in Firefox and Internet Explorer but not in Chrome. For chrome, if all elements inside the button should respond to the click add this:

button > * {
    pointer-events: none;
}

Otherwise add to select elements as needed.

original answer from css-tricks