transform HTML string to Angular Components

Question

let's say we do an API call and get some HTML DOM in a String. The content comes as HTML without angular, so I have first to transform it to Angular where I want and then compile it as angular.

Example API response:

<div>
...some more html...
<h1>a header</h1>
...some more html...
<a href="somewhere.com" class="a-class" id="a-id">A Link</a>
...some more html...
</div>

I am transforming this to get all Anchors <a href="x"></a> and converting them into angular components with inputs and outputs to be injected in the parent container and parsed all together, for example:

<angular-anchor   
  [href]="somewhere.com"
  [innerClass]="thisClasses"
  [innerID]="thisID" 
  [content]="thisContent">
</angular-anchor>

angular-anchor contains a click method that execute code from outside these components but inside angular (from a service).

By using [innerHTML] in the parent container where the transformation is done by a pipe just before just like:

<parent [innerHTML]="APIResponseHTML | transformAnchorsPipe"></parent>

Angular components inside will NOT be loaded and the whole work is just raw Angular parsed by safeHTML included in the Pipe transformation.

To solve this i used ng-dynamic library but is outdated and is not compatible with AOT compilation. Despite this, I manage it to work with JIT compilation but this is not good for production and a lot less efficient.

Example of this approach, "parentDIV" is a standard HTML tag:

<parentDIV *dynamicComponent="APIResponseHTML | transformAnchorsPipe; 
    context: {dependency: dependencyName};">
</parentDIV>

context contains all dependencies required inside the new component, for example my third Service I am using in "angular-anchor"

From this point, I read several documents about Angular Elements or Dynamic Components Injector, but I could not get with it in my application.

Is it there any good approach to use my custom angular components available with AOT using these methods I just mentioned or any other?

Thanks in advance. Ask me for more details if needed.

Answer 1

<parent [innerHTML]="APIResponseHTML | transformAnchorsPipe"></parent> inner html is not an known property of parent if parent is a component

Pass your html as a string to any of the properties in parent component - you can achieve using @Input() decorator on your properties - you might have an idea about it

Finally try to pass the string as an inner html to any of your div tags in parent.component.html - i hope this will parse your html string and append the html inside specified div

If this didn't work - try to add html encoding for your html string and then try to bind it - hope this will solve your first problem - happy coding :)