Property 'clientX' does not exist on type 'Event'. Angular2 Directive

Nate May picture Nate May · Dec 12, 2016 · Viewed 8.7k times · Source

I'm trying to listen to the X position of my mouse in an Angular2 Directive like this:

@HostListener('mousemove', ['$event'])
onMousemove(event: Event): void  { 
  console.log(event.clientX)
}

but I get the error

Property 'clientX' does not exist on type 'Event'.

This is odd because this listener

@HostListener('mousemove', ['$event'])
onMousemove(event: Event): void  { 
  console.log(event)
}

logs out an event object

enter image description here

Why can I not access event.clientX?

Answer

Günter Zöchbauer picture Günter Zöchbauer · Dec 12, 2016

Change the parameter type

onMousemove(event: MouseEvent): void  { 
  console.log(event.clientX)
}