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.

You can create a component and add it's tag in another component. — Alok Mali
– Alok Mali, Commented Aug 23, 2019 at 10:33

Nikolai Kiefer · Accepted Answer · 2019-08-23 11:33:51Z

5

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

answered Aug 23, 2019 at 11:33

Nikolai Kiefer

6136 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sukhdeep Singh · Accepted Answer · 2019-08-23 10:29:07Z

4

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

answered Aug 23, 2019 at 10:29

Sukhdeep Singh

413 bronze badges

1 Comment

Achraf El Khamsi Over a year ago

that's what i'm doing right now, but still all the special characters in the string should be escaped...for a long code it's problematic

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related