Angular 4 execute function from external html

Question

I am new to angular 4. I have a component which makes an API call. API call returns me some html that has angular 4 code:

(click) = "functionName()".

The problem is functionName is never called

Answer 1

I don't need to see your code to tell you that what you're doing is wrong.

When you write

(click)="functionName()"

You're not saying

Handle a click event on this tag

You're saying

Please almighty Angular, when you compile my code to native Javascript, could you have the decency to bind an event on the click on this tag ?

(Ok, I've gone too far, but you get the point).

This means in a template, when you write this; it is changed at compilation to

onclick="a()" // It's minified once bundled

So, if your write this in your database, it will not be compiled, meaning it will neither understand what (click) is, nor what functionName represents.

What are your options ?

You could, for instance, write this in your database

onclick="windowFunctionName()"

Instead of what you wrote, and in your component, create a function bound to your window :

ngOnInit() {
  window['windowFunctionName'] = () => { /* ... */};
}

ngOnDestroy() {
  delete(window['windowFunctionName']; // delete it for memory purpose
}