Angular: best way to access component properties & functions in click handler of child element of

Question

I am having the same error as this person: Add onclick event to SVG element

But I am having it in Angular which makes it even harder to deal with.

I want single SVGPathElement to be clickable & access component properties and functions in this click handler. But this is giving me the error 'property undefined' or 'function doesn't exist'.

According to this answer: Add onclick event to SVG element It's because all of the JavaScript must be included inside of the SVG for it to run.

But I cannot even do what the mentioned answer Add onclick event to SVG element suggested, since I get an error probably because Angular cannot create the component when parsing the html.

I also looked at http://xn--dahlstrm-t4a.net/svg/html/from-svg-to-parent-html-script.html (mentioned in the comments of the above answer) but that gave me the same error as in the picture above.

Now the second requirement to the solution to my question:

I am planning on having many different svgs and interacting differently with them. So manually pasting some <script> into the svg won't be a scalable nor maintainable solution for me. So actually I would prefer not doing this over the html with <script> tags at all.

If anyone has a good solution to solve both of my inquries in angular I would be greatful.

Additional Info:

I am using the ionic framework but I don't think it matters in this case

One possible alternative solution:

One could use ReactJS instead of Angular. SVGPathElement<->Component interaction works in ReactJS without doing anything manually. I have no idea why but there is no such errors maybe because the component is not a class but rather a function. This would be great to know why exactly! I don't want to use ReactJS since I am not familiar with it. But maybe it's my best option to just switch frameworks since SvgPathElement<->Component interaction is a key part of my mobile app (it's like the seterra mobile app (https://play.google.com/store/apps/details?id=com.seterra&hl=en&gl=US)).

Answer 1

I found the culprit:

Don't do this (Angular doesn't allow it for some reason):

ngOnInit() {
    document.querySelectorAll('.area').forEach((element: Element) => {
            element.addEventListener('click', this.clickHandler);
        }
    );
}

Instead you have to add the click handlers manually like this:

<svg id="svgroot">
    <path ... (click)="clickHandler()">

If anyone knows how to make this work by adding click handlers programmatically then this would make the solution a lot more automated/scalable/maintainable.

Adding click handlers programmatically to the SvgPathElement works in ReactJS for some reason, probably due to some internal differences between how the frameworks generate components.