ng2-component-injector

Simple injector for angular 2 components. You just have to provide : container, component class, inputs and ouputs. See example/ if needed.

Install

npm install ng2-component-injector --save

@NgModule({
    imports: [Ng2ComponentInjectorModule],
    entryComponents: [ /* Put here your components to be injected */  ],
})
export class AppModule { }

Documentation

Ng2ComponentInjectorService

create(config: Ng2ComponentInjectorConfig, index?: number): ComponentRef<any>

Create and inject an angular 2 component.

Ng2ComponentInjectorConfig

export interface Ng2ComponentInjectorConfig {
  container:ViewContainerRef;
  component:any;
  inputs?:any;
  outputs?:any;
}

container: ViewContainerRef

The container where you want to inject your component. Example: contentContainerRef

<template #contentContainer></template>

 @ViewChild('contentContainer', { read: ViewContainerRef }) contentContainerRef: ViewContainerRef;

component: any

The component to inject. Example: MyComponent

 @Component({
  selector: 'my-component',
  template: '<span>my component</span>'
})
export class MyComponent {}

inputs: any (optional)

The list of inputs to bind. Example:

 {
    id: 13, // @Input() id:number;
    name: 'bob'
 }

outputs: any (optional)

The list of outputs to bind. Example:

 {
    onChange: () => { console.log('change'); } // @Ouput() onChange:EventEmiter = new EventEmitter();
 }

Ng2ComponentInjectorComponent

<ng2-component-injector
    [config]="{
        component: myComponent,
        inputs: {
            id: 13
        }
    }"
></ng2-component-injector>

Inject an angular 2 component. The config is the same as Ng2ComponentInjectorConfig except that you don't need to provide a container.