Angular (click) not fired and how to fix it

Sometimes, very rarely, you can run into situation then Angular does not fire the (click) event. Or it fires later, on the 2nd click. It can be really hard to debug and figure out what causes it.

So here are my two cents. This can be caused by view being updated while user clicks. What happens under the hood is this: Click event consists of mousedown event followed by mouseup event. That is important to remember! But when the view changes, then the mouseup event is fired elsewhere, so the click event never happens. It can even be, that the re-rendered button is the same exact position, and visually nothing has changed. But internally it is different DOM element.

To sum it up: Click event is actually two events combined on the same element, mousedown and mouseup.

The hotfix is then obvious, bind to (mousedown) event, which will surely fire, when the user clicks it.


<!-- hotfix -->
<div (mouseDown)="clickHandler()"></div>