ng2 - dynamically creating a component based on a template

Question

I\'ve been looking at the Angular 2 APIs for ComponentResolver and DynamicComponentResolver for creating dynamic components, but I have something d

Answer 1

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

Answer 2

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