How to handle (click) and (wheel) events on "object" element in Angular 7?

Question

JavaScript

Good afternoon.
I can't figure out why the (click) and (wheel) events don't fire on the SVG tag. Broke my whole head. All code on stackblitz.com . For some reason, svg is not drawn there, I highlighted the blocks with borders. To be more precise, why do events not fire even on the parent element if you click on inside it , but if you click on the parent without hitting , then the events fire and are processed normally? Can you tell me how to handle similar events in Angular 2-7 components? <object type="image/svg+xml">
<object><object>

Answer 1

Have you looked at devtools? The content of object is already another document, events from it do not get into the external document.
Angular 8 allows you to specify svg as a template for a component, maybe this will help you.
Or insert svg tags directly into html, angular will also be able to work with them.

Answer 2

Too lazy to follow the link, but Angular does not use any of its handlers like React or Vue, it just has a wrapper over native events. And in normal js, this may not work due to the fact that, for example, the line is too thin and you still need to get into it, you can create a bold transparent area with coordinates on top and increase the click area, or impose a transparent block on top.