Assign Onclick property to a element added dynamically from server

Using [innerHTML] property to add the received content from server, if the appended HTML has (click) (onClick) or i’m supposing any other script tag they don’t function when the HTML is inserted.

Supposing:

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

and in component.ts

element: string = "";
this.http.get....subscribe((data) => { // Some http call
    element = "<div id="element" (click)="console.log("something")"> data </div>"
})

Even though element shows properly the click function on it does not work.
I’ve tried doing it with adding event listener after the element variable is assigned new value but that doesn’t seem to be the moment html DOM is changed. so the event binder this.elementRef.nativeElement.querySelector('#element').addEventListener('click', this.onClick.bind(this)); throws error since it can’t find the element.
I don’t know when the HTML is changed. So I can’t use this inside ngAfterViewInit either.

What is the workaround here? and how do people normally add such dynamic html with javascript inside them anyway? looking for best practices.