I've found example of calling function in innerHtml https://stackblitz.com/edit/angular-innerhtml-examples , but I don't know what to do, if function needs variable, which acceptable only from controller:
constructor(private elementRef: ElementRef, private sanitizer: DomSanitizer) {
const currentString = "green";
this.content = this.sanitizer.bypassSecurityTrustHtml(
'<button type="button" id="submitButton" (click)="openWindow()">Submit</buttn>'
);
}
openWindow(string) {
alert(string);
}
Try to add your variable as a param to addEventListener('click',someEventHander.bind(this, param1)).
Check this stackblitz example: https://stackblitz.com/edit/angular-innerhtml-examples-hdw7xs?file=src%2Fapp%2Fapp.component.ts
You can also refer to: https://www.codegrepper.com/code-examples/javascript/addeventlistener+with+arguments+in+angular+8
Also it is better/clean way to use bypassSecurityTrustHtml into angular pipe then call it from [innerHtml]. I adapted the above stackblitz example to use this way.
And finally, please use console.log() instead of alert() when debugging an application. for reason and more details: Why is console.log() considered better than alert()?