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 ponents gives us the ability to do a bunch of stuff with our blog that we won't be able to do otherwise. Signup ponents, custom widgets, etc. We can do all this and still have the ability to store the content separately outside of the application.

Custom ponents 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 ponent. I want to render the html and all ponents 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

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

Any help would be appreciated.

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 ponents gives us the ability to do a bunch of stuff with our blog that we won't be able to do otherwise. Signup ponents, custom widgets, etc. We can do all this and still have the ability to store the content separately outside of the application.

Custom ponents 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 ponent. I want to render the html and all ponents 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./edit/angular-wylp55

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

Any help would be appreciated.

• javascript
• angular

• why doesn't DynamicComponentLoader work? – chrispy Commented Apr 3, 2018 at 18:21
• DynamicComponentLoader is deprecated (?) – Amos47 Commented Apr 3, 2018 at 18:22
• where did you see that? I still see it in the docs angular.io/guide/dynamic-ponent-loader – chrispy Commented Apr 3, 2018 at 18:30
• I read it in another SO post. After looking at stackblitz./angular/…. It seems like it isn't going to solve the problem anyways. – Amos47 Commented Apr 3, 2018 at 18:39
• This post. stackoverflow./questions/34784778/… – Amos47 Commented Apr 3, 2018 at 18:42

1 Answer 1

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

Here's the link to the updated stack blitz.

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

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