Angularjs - Getting X & Y Positions From Mouseclick In Div

I made a function that should add an item on the position I clicked inside a div. Now the problem with this function is, every time I click, it takes the x & y position of the

Solution 1:

You need to change event.x to event.offsetX and event.y to event.offsetY

You didn't add the template definition but I'll add it just in case:

<div ng-click="addOnClick($event)"></div>

Solution 2:

In html file, use:

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

And in the function in the ts file::

functiontest(e){
 console.log(e.clientX);
 console.log(e.clientY);
}

Solution 3:

For those on angular who are using dragging libraries and want the position of the element that was dragged:

<div ng-click="OnDrag($event)"></div>

and in the controller

$scope.onDrag($event){
      console.log("X ->",$event.originalEvent.pageX,"Y ->",$event.originalEvent.pageY)

 }