I am encountering an issue while trying to implement a service within the ngOnInit method. My goal is to utilize an SVG map where I access elements of the map using the following code:
let a = document.getElementById("biharsvg") as HTMLObjectElement;
To display the SVG map in my component.html file, I have added the following code:
<object data="assets/img/bihar.svg" id="biharsvg" type="image/svg+xml"></object>
Within my ngOnInit function, I am referencing the biharsvg ID like this:
let a = document.getElementById("biharsvg") as HTMLObjectElement;
a.addEventListener("load", function() {
var svgDoc = a.contentDocument;
var wchamparan = svgDoc.getElementById("wchamparan");
wchamparan.onclick = function() {
alert("hello");
this.SvgService.barchart()
}
})
All seems to be working fine as I receive an alert message upon clicking. However, when attempting to call a function from my service within that click event, errors arise. The first error appears in Visual Code:
[ts] Property 'SvgService' does not exist on type 'HTMLElement'.
any
Additionally, the console displays the following error:
Uncaught TypeError: Cannot read property 'barchart' of undefined
When I use this code inside onInit, everything works without any issues; trouble only arises when I try to include it within the onclick or addEventListener functions.
Any suggestions on how to address this situation would be appreciated.