1

In Angular, how do you make a reusable component that takes a string as input and renders it as a template dynamically during run time?

It should instantiate Angular components that appear in the markup, and it must be possible to have several of this component on the same page.

The purpose of such a component would be to be able to load the structure of pages from a back end database.

Is it feasible? And if so, how do you go about it?

zxz
  • 709
  • 1
  • 8
  • 19
  • See also https://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2 – Günter Zöchbauer Jan 18 '18 at 19:14
  • The problem with this solution is that I can't figure out how it can allow me to instantiate more than one of the template. Let's say I add a new component called WordComponent to the declarations and entryComponents of the RuntimeComponentModule. Then I get this error: WordComponent is part of the declarations of 2 modules: RuntimeComponentModule and RuntimeComponentModule! Please consider moving WordComponent to a higher module that imports RuntimeComponentModule and RuntimeComponentModule. – zxz Jan 18 '18 at 19:43
  • Please create a reproduction on http://staclblitz.com. I guess you're creating the dynamic module every time you add a component, instead of keeping and using the same module/component instance every time. – Günter Zöchbauer Jan 18 '18 at 19:46
  • Yes, that seems to be the case. All the examples I see create the dynamic module on the fly when instantiating the dynamic component. Maybe I'm misunderstanding how it's supposed to be used? Here's the stackblitz of my setup: https://stackblitz.com/edit/angular-4smp2p – zxz Jan 18 '18 at 20:01

0 Answers0