Why Angular2 (click) event is not firing on a <div>?

Question

I found a strange behaviour with Angular2:

(click) isn't firing on this:

<div (click)="test()">test</div> 

But it works here:

<div style="position: relative;" (click)="test()">test</div> 

Can anyone explain this behaviour? Why there is a need to set position style in order for (click) to fire?

Am I missing anything?

Answer 1

Your code snippet looks all good!

The issue is in your CSS styles. Your <div> probably either inherits a different position value or simply - goes behind another element which element blocks your <div> (does not allow it to be clicked).

By changing the position to relative it works, most probably because this position enables z-index and moves your <div> on top to the other element that's blocking it.

This should be enough for you to figure it out. But if you want more detailed answer - please share your CSS too.

Answer 2

Faced the same issue, and the problem was that I named an HTML element and the method the same.

It was such:

mycomponent.html

<div #doSomething> </div>  <div (click)="doSomething();"> </div> 

mycomponent.ts

doSomething() {     // ... }