Angular2 pass html to component

Question

I am trying to create a component which displays a code example for a given component. The component shall be passed as HTML to the code-example component and be rendered once normally but also have its code displayed below.

When trying to fetch the code from <ng-content> in ngOnInit, Angular already started rendering the component, which means that I do not get the original code between the tags.

Passing the code via input does not work out, as the components may use single and double quotes which will cause problems when binding the data.

What I also tried is passing the code escaped to the component like

<code-example>
    &lt;component>&lt;/component>
</code-example>

To unescape it and render it afterwards, which did not work out for me as I had trouble adding this pre-defined element to the DOM in a way that Angular renders it as a component.

Are there any other methods of dealing with this problem that I might be missing?

if you are trying to get the html as it is ,without being rendered, why not use <pre> tag of html? — TruckDriver
– TruckDriver, Commented Aug 7, 2017 at 10:28
The problem is that I want a mixture of both @Timothy. I want to render the element and display the source code, in the best case by pasting it only once. Angular renders components as soon as it finds any, which makes it hard to gather the source code for displaying — Marv
– Marv, Commented Aug 7, 2017 at 11:16

Spitzbueb · Accepted Answer · 2017-08-07 11:02:22Z

1

As @Timothy suggested you may try the <pre> tag.

If you also want to highlight the syntax of your code I can recommend a third party module called ng2-prism.

This is a library that supports multiple languages and is quite easy to use.

answered Aug 7, 2017 at 11:02

Spitzbueb

5,9811 gold badge24 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Angular2 pass html to component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related