How to call the function with variable in innerHtml?

Question

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);
  }

You can't. Click directive does not work inside `innerHTML` - it's pure html, not Angular code. — Bojan Kogoj, Jan 05 '22 at 11:13
IT's a bit old but your question is like this [SO](https://stackoverflow.com/questions/64276306/dynamically-add-elements-to-the-editable-div-with-angular-and-anywhere). I don't know if can inspirate you — Eliseo, Jan 05 '22 at 12:09

score 1 · Answer 1 · answered Jan 05 '22 at 14:28

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()?

How to call the function with variable in innerHtml?

1 Answers1