Search code examples
angularinnerhtmlcode-injection

Angular innerHTML limitation in dynamic component injection

I have this type of safe HTML string that comes from the server, it is a preview that I want to inject into an Angular 6.0 application. The number of sections and sub-section is varying.

<div id="s1" class="section">
	<div class="section-content">
		start of content
		<div id="ss1" class="sub-section">
			content of sub-section
		</div>
		end of content
	</div>
</div>

Basically I know how to use the innerHTML attribute to do this. The problem is that I have to make this preview "reacting" like an Angular component. So I thought about dynamic component injection, a component for the section and a component for the sub-section. For the sub-section rendering is easily done with a innerHTML attribute. But I do not know how to render the section because inside "start of content" a tag can be opened and close only in "end of content" this exclude the use of the innerHTML attribute for rendering the section that must be included in a parent tag.

Does any one can help me on this subject ?

Thanks in advance !

Solution

  • I think your problem will be solved if you make a on-the-fly component that will be helpful with your case I thought

    Check the last section of this article which talks in depth about it with code example: https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36