Add dynamic html to angular component

0
votes

I have an angular component which is similar to textEditor(contentEditable div) . It has it's html template. Now based on what user typed , I want to add some dynamic html as well. Something like this:-

<span class="macro consolas-text" (click)="OpenPopup()"></span>

I am able to add this html dynamically to my html template but I am unable to call this function "OpenPopup". I think angular is unable to identify this span since this was added dynamically.

How can I make it work?

1
angular
How did you add that html snippet dynamically to the html template? Maybe the function you used didn't add it like you thought it did. - Federico Pettinella
I am just creating this entire span using string concatenation. I am not using any of the document.createElement() and other operations. This is an existing code and it used to work in angular 1 but OpenPopup() was not sitting in angular controller or service. It was a pure javascript function. This is breaking when migration from angular 1 to angular 2. - user911
How did your angular 1 project know where to look to find the OpenPopup() function? Could you emulate that process for Angular 2? - Federico Pettinella
It's an angularjs attribute directive that creates a dynamic html based on what user has entered in textbox. we were not using ng-click but onclick="OpenPopup()". This was working since this OpenPopup() function is present in global scope as it's a pure javascript function. - user911
Could you access the OpenPopup() function in your component's class? You'll could try declare function OpenPopup; and then using it. - Federico Pettinella

1 Answers

0
votes

Use innerHTML property binding, if you are assigning a variable

<span class="macro consolas-text" (click)="OpenPopup('sometext')" [innerHTML]="sometext"></span>

If you want to assign some text , use ' ' 

<span class="macro consolas-text" (click)="OpenPopup('sometext')" [innerHTML]="'some text'"></span>