Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add click event to image in Angular 4

Tags:

html

css

angular

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?

like image 287
AlejoDev Avatar asked Jul 27 '18 23:07

AlejoDev


People also ask

Which of the following is the correct way to bind a click event to the button?

Bind the target event name within parentheses on the left of an equal sign, and event handler method or statement on the right. Above, (click) binds the button click event and onShow() statement calls the onShow() method of a component.

What is click in Angular?

ng-click is an attribute of an HTML element that can be used for the customized components in Angular. We use this attribute to detect if an element is clicked and tracks the mouse's cursor. ng-click takes a function as an attribute and calls it whenever an element is clicked.

How do you programmatically trigger click event in Angular 4 and 5?

getElementById() and is casted to an HTMLElement type. HTMLElement represents any element in the document and implements Event Handler interface, so now we can call click() . Successfully, the file browser is triggered to open.


1 Answers

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

like image 69
Carlos E Avatar answered Sep 23 '22 00:09

Carlos E