Angular: Binding component selector from dynamic string

Question

I'm developing a modular angular 8 app and I'm wondering if is it possible to call a "dynamic" component selector inside a template.

For instance: I have a module called "TestModule" loaded in my application. It have a component callable by a "test-component" selector.

I can load this component using the selector in the main application template:

<test-component></test-component>

Is it possible to use a variable for the selector? Since the modules are dynamic it's name is not know. A (non working) solution should be:

<{{dynamicName}}></{{dynamicName}}>

And in the main app component dynamicName is set to "test-component".

Thanks

You could use an Angular CDK Portal which is a "piece of UI that can be dynamically rendered to an open slot on the page": material.angular.io/cdk/portal/overview — Edric
– Edric, Commented Dec 5, 2019 at 12:00

Hoff · Accepted Answer · 2019-12-05 12:18:05Z

1

I recommend you follow this tutorial from the official docs.

It involves creating a very simple directive (just to get a hold of the element where you want to render your dynamic component), and the using Angular's componentFactoryResolver to create and render your dynamic component on the fly.

The tutorial may look a bit daunting, but if you strip it down to just cover your needs it will only turn out to be maybe 10 lines of code.

answered Dec 5, 2019 at 12:18

Hoff

40.1k17 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pennywise83 Over a year ago

Thanks, I've struggled all the day with this approach and with the Angular CDK One. The big problem is that I need to inject a component that is inside an UMD module that I load dynamically. It seems that the lazy loaded modules doesn't expose the componentFactory, the only way is to load that module in the main AppModule, but it is not possible in my case.

Collectives™ on Stack Overflow

Angular: Binding component selector from dynamic string

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related