angular - 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?

question from:https://stackoverflow.com/questions/41537122/why-angular2-click-event-is-not-firing-on-a-div

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.