Within my Angular 10 application, I am utilizing innerHtml to display some content that includes anchor links.
My goal is to trigger a function every time a link is clicked, which will then invoke an Angular service.
In the code snippet below, I am attaching an addEventListener to all the links:
ngAfterViewInit() {
this.privacy_policy = this.elementRef.nativeElement.querySelectorAll('a.privacy_policy');
this.privacy_policy.forEach((anchor: HTMLAnchorElement) => {
anchor.addEventListener('click', this.taggingPrivacyPolicy);
})
}
taggingPrivacyPolicy() {
const eventTag: EventTag = {
z_eventplace: 'terms_and_conditions',
z_eventtype: 'privacy_policy',
z_eventvalue: `${this.brand}_policy`
};
this.taggingService.tagEvent(`${this.brand}_policy`, eventTag, 'onclick');
console.log('clicked');
}
However, when a user clicks on the link, I encounter the following error:
ERROR TypeError: Cannot read property 'tagEvent' of undefined
What steps can be taken to resolve this issue?