Angular detect and insert components

Question

Background

I am trying to create a blog using Angular (5). I am using markdown and storing that data outside the application. It downloads the markdown, parses it into an html string, then binds to the innerHTML of a div.

I understand that I am working against the grain, but I would really like to be able to create an elegant solution here.

Problem

Having the ability to use custom components gives us the ability to do a bunch of stuff with our blog that we won't be able to do otherwise. Signup components, custom widgets, etc. We can do all this and still have the ability to store the content separately outside of the application.

Custom components are not detected from the innerHTML string. Which doesn't allow it. It seems like DynamicComponentLoader used to provide a solution for this, but not anymore.

Clarity

I am not trying to render only the html, or only a single component. I want to render the html and all components included.

I also don't care that it's bound to the innerHTML property, it just seemed to get me the furthest. I can/will use a resolver if that would help.

Example

https://stackblitz.com/edit/angular-wylp55

As you can see the hello component renders in the html, but not the component itself.

Any help would be appreciated.

Answer 1

So I finally figured this out and did a write up.

Here's the link to the updated stack blitz.

https://stackblitz.com/edit/angular-dynamic-html.

I also did a full write up on my company blog. https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html.