Angular component that takes HTML code as input (the sequel)

Question

This question is a continuity to a previous question that I asked: previous question

What I wanted to do is to pass an HTML code to an angular component so that it can be displayed and executed. The Idea was to pass the HTML code to the component as a string input (after escaping all the special characters), anf then using pipes to bypass the navigator's trust security so that the code can be executed.

However, if the HTML code is long, it can be very tedious to pass it as a string and to escape all the special characters. My question is : Is there any way to pass my HTML code without passing by inputs ? If not, Is there any input type that can be more suitable for an HTML code than a string ?

Thanks for your help.

Answer 1

You can use <ng-content></ng-content>. If you put ng-content in the template of a componenet you can insert html code there. It works like this:

Template of component where code should be put

<div>
  <ng-content></ng-content>
</div>

now you can just put the code between the tag of the component

<example-component>
  <p>Example Code</p>
  <p>More example code</p>
</example-component>

The two <p> will be inserted where the <ng-content> tag is

Answer 2

You can simply pass the string as shown<div [innerHTML]="yourStringBindingHere"></div>