Events not works inside innerHtml

Ionic Framework
1

I need to generate html string programmatically and then show it in my div

<div [innerHTML]="formattedFormula"></div>

My dinamyc string needs to manage click events, for example

formattedFormula = "<div>hello</div> <div onclick="myFunction()">Luca</div>"

Unfortunatle, the click event do not works.

Could you help me to implement this scenario?

2

(click) instead of onclick

3

You cannot bind angular events directly to innerHTML. If you need to attach the event listeners you need to to do it after the html content is loaded.

Once the content is set to the variable, ngAfterViewInit Angular life cycle event will be triggered. Here you need to attach the required event listeners.

ngAfterViewChecked (){
    if(this.elementRef.nativeElement.querySelector('#my-button')){
      this.elementRef.nativeElement.querySelector('#my-button').addEventListener('click', this.openAlert.bind(this));
    }
  }