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

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.

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() {
    // ...
}

I was also facing the similar issue mostly time on Iphone. basically the pointer-event causing the stuck on the components. So I just applied the below fix at all the events where i applied the (click) property on the tag.

    a,
    div,
    ion-item,
    .item-md,
    .item-ios,
    .segment-button,
    .select-md
    .select-ios,
    .button-ios,
    .button-md,
    .searchbar-md,
    .searchbar-ios {
        pointer-events: auto !important;
    }

Now it is working fine in both Android and IOS platform.