I am working on a custom UI element where users will move a circle on a square as an input. For that i need the circle to follow the mouse when the mouse enters the square. In javascript that is quite easy as shown here: https://www.kirupa.com/canvas/follow_mouse_cursor.htm
When i try to do it now in angular, i am not sure what the correct way to do it is. I need the offset from the square. For that i need to access the square element. All the solutions i found used ElementRef and it's easy to make it work that way and seems to be the common way. angular 2 / typescript : get hold of an element in the template
But on angular.io it's said to not use it. It's even listed as a rookie mistake http://angularjs.blogspot.de/2016/04/5-rookie-mistakes-to-avoid-with-angular.html. It says to use invokeElment and viewChild. But the offcial solution doesn't work anymore because invokeElement does not exist in Renderer2.
So what is the right way to do it? Can i use ElementRef an be good normally? Am i understanding something fundamentally wrong?