How to load an element component with a string in Angular 2

Question

I created an angular element that I can call via an url like this: http://localhost:8080/elements/ExampleElement.js This element holds a component, that I want to use in another application.

In my application where I want to call the component, I established some lazy loading of components in my html, that is working fine:

<example-component *axLazyElement="http://localhost:8080/elements/ExampleElement.js"></example-component>

However, now I have the scenario, where I have the element component as a string:

"<example-component *axLazyElement="http://localhost:8080/elements/ExampleElement.js">"

and I want to load it in my component with the string. I dont have the opportunity to get the tag "example-component" and the url "http://localhost:8080/elements/ExampleElement.js" singly. My first idea was to do it with innerHtml, but innerHtml is only working for some predefined tags.

So do you have any idea, how I can load my Example-component that is given by a string?

I am using Angular 12.2.6.

Thank you for your help!

Answer 1

axLazyLoading offers some dynamic loading of elements: angular dynamic lazy loading

For this example you could code something like this in your html:

<ax-lazy-element *axLazyElementDynamic="'example-component', url: url; module: false">
</ax-lazy-element>

In your typescript you then need to define your url:

url = "http://localhost:8080/elements/ExampleElement.js";

For this solution you will need your tag name and the url to the element. If you have only one string of the whole html element, you can extract the tag name and the url out of your string with DOMParser. So a function to extract for example the tag could look like this:

extractTagFrom(html: string){
    new DOMParser().parseFromString(html, "text/html").documentElement.tagName;
  }