pass mouseevent to component onclick

Question

I'm trying to capture mouse coordinates in a Angular component.

Here is the html in question:

Here is the component function in the corresponding typescript file:

onClick( ev : MouseEvent ) {
  console.log("x:" + ev.clientX);
}

And the error in the console:

Cannot read property 'clientX' of undefined'

What would be the correct way of passing that MouseEvent to my component function?

user_5485167 · Answer

You should use $event to pass MouseEvent object to your click handler.

So simply write:

(click)="onClick($event)"

See also

user_1779772 · Answer

Current best practice:

onClick(myClientX: number) { 
  console.log("x: " + myClientX);
}