3

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.

Amos47
  • 695
  • 6
  • 15
  • why doesn't DynamicComponentLoader work? – chrispy Apr 03 '18 at 18:21
  • `DynamicComponentLoader` is deprecated (?) – Amos47 Apr 03 '18 at 18:22
  • where did you see that? I still see it in the docs https://angular.io/guide/dynamic-component-loader – chrispy Apr 03 '18 at 18:30
  • I read it in another SO post. After looking at https://stackblitz.com/angular/pednjqlegby?file=src%2Fapp%2Fad-banner.component.ts. It seems like it isn't going to solve the problem anyways. – Amos47 Apr 03 '18 at 18:39
  • This post. https://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#answer-34786039 – Amos47 Apr 03 '18 at 18:42
  • That's from 2 years ago.... the class was removed, but it's a help article now that just uses different types. Give the article a look, please. – chrispy Apr 03 '18 at 18:43
  • I did look at the article, but I was not able to get it to work for my situation. That's how I ended up here. – Amos47 Apr 03 '18 at 18:45

1 Answers1

10

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.

Amos47
  • 695
  • 6
  • 15
  • 1
    Is there any way to get the input parameters working? I would like to create a widget where I can specify the question and the correct answer. – Ambrus Tóth Mar 18 '20 at 22:41