Look up Angular Type using a string

Question

I am making a drag-and-drop application with a toolbox from which you grab widgets and place them in a div. I followed this example, and it works great so far, but now I want to be able to persist the configuration (to JSON) then reload it, and I'm stuck.

The hosting component gets a ComponentFactoryResolver. From there I can say:

let factory = resolver.resovleComponentFactory( SomeComponent )

but my next step is to be able to do so using a name (string). ComponentFactoryResolver takes a Type. Is there some way to either look up the Type given its name? I figure there must be some way to do so through the injection framework, but I haven't been able to make the connection via the API documentation.

Christian Benseler · Accepted Answer · 2018-05-22 15:20:01Z

The "problem" is that you have to import each component that will be injected, in your host component. Let's say:

import { SomeComponent1 } from '../component1';
import { SomeComponent2 } from '../component2';
import { SomeComponent3 } from '../component3';

One way to do what you want is relate them in an object

components = {
  'key1': SomeComponent1,
  'key2': SomeComponent2,
  'key3': SomeComponent3
}

and then use a string (in my following example, that is retrieved from another method) to get the component you want

const key = someMethodOrServiceThatGivesYouAString();
let factory = resolver.resovleComponentFactory( this.components[key] );

I know this is not what exactly you was looking for, but this is the way I'm doing this in an current app I'm working.

I found another way to do this looking at resolver['_factories'].keys() but it feels too undocumented to be safe. So I think I'll take your suggestion, thanks.

Collectives™ on Stack Overflow

Look up Angular Type using a string

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related