Angular 7: Dynamically generate template

Question

I'm rewriting my website https://ixtutor.com/ completely in angular. I've created few components that render as widgets on a blog page.

For example, on a blog post https://ixtutor.com/tensorflow-basics-with-housing-prices-prediction-example-chapter-i/ , there are widgets like, (i) Code runner widget (ii) Exercise widget

I'm modeling these widgets as components in my angular application.

Problem: One of the page in my application is a live html editor, which allows an author to write the (angular) html templates in a textarea T1 and see the (rendered) view side-by-side. I also want the author to be able to use the widget components in the html that they create.

This works great with regular html tags, where I can use the innerHTML property of a div to directly bind the ngModel of the textarea T1, however, it doesn't work for the angular components.

I've looked at dynamic angular components but I cannot figure out how to use that in a full-fledged html template. Any recommendations or suggestions will be really appreciated.

Thanks.

Answer 1

Angular does not support inserting dynamic components in the template at runtime. It has to know at compile time which components will be inserted.

The only way is to compile your Angular components to web components using Angular elements, that way, you will be able to insert them as custom HTML elements in your application.

You will have to develop them in a separate library for this.