ng2 - dynamically creating a component based on a template
It's also possible to iterate through import:
import * as possibleComponents from './someComponentLocation'
...
let inputComponent;
for(var key in possibleComponents ){
if(key == componentStringName){
inputComponent = possibleComponents[key];
break;
}
}
Update: or just :-)
let inputComponent = possibleComponents[componentStringName]
then you can create instance of component for example:
if (inputComponent) {
let inputs = {model: model};
let inputProviders = Object.keys(inputs).map((inputName) => { return { provide: inputName, useValue: inputs[inputName] }; });
let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
let injector: ReflectiveInjector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicInsert.parentInjector);
let factory = this.resolver.resolveComponentFactory(inputComponent as any);
let component = factory.create(injector);
this.dynamicInsert.insert(component.hostView);
}
note that component has to be in @NgModule entryComponents
Update2:
As @estus mentioned in comments version with className won't work with minification. To do it working with minification you can
1) add some static key on each of your entryComponents
like:
export LineChartComponent {
static key = "LineChartComponent";
}
and then use this key
as unique.
const factoryClass = <Type<any>>factories.find((x: any) => x.key === compClassKey);
2) create a dictionary like
export const entryComponentsMap = {
'comp1': Component1,
'comp2': Component2,
'comp3': Component3
};
and then
const factory = this.resolver.resolveComponentFactory(entryComponentsMap.comp1);
Update1:
Here's version from component`s class name
const factories = Array.from(this.resolver['_factories'].keys());
const factoryClass = <Type<any>>factories.find((x: any) => x.name === compClassName);
const factory = this.resolver.resolveComponentFactory(factoryClass);
- How to load component dynamically using component name in angular2?
Old version
You can get factory by component selector but you have to use private property.
It might look something like:
const factories = Array.from(this.resolver['_factories'].values());
const factory = factories.find((x: any) => x.selector === selector);
Plunker Example