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?
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With