CODEWITHSUNDEEP
angular
wz2b
wz2b

Reputation: 1025

Look up Angular Type using a string

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.

Upvotes: 0

Views: 54

Answers (1)

Christian Benseler
Christian Benseler

Reputation: 8065

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.

Upvotes: 1

Related Questions