component-injector

1. Description
2. Installation
3. Usage
4. Methods
5. Build
6. Publish to npm
7. Git repository
8. Version

1. Description

component-injector or ComponentInjector is a Component Injector service which injects dynamically components into angular2+ projects

2. Installation

Install the module into your application and save it as a dev dependency in your package.json file

npm install component-injector --save-dev

3. Usage

In order to use the ComponentInjector service you have to include/import the service and its module, where the service is defined, into your application:

import {ComponentInjector, ComponentInjectorModule} from 'component-injector';

Register it in your application's imports list of your @NgModule(...):

@NgModule({
  //...
  imports: [ComponentInjectorModule],
  //...
})

Using the method setComponentFactories() provide the entryComponents list of the application's @NgModule(...).
The file ./src/app/app.module.ts:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {ContainerComponent} from './container/container.component';
import {HeroComponent} from './hero/hero.component';

import {ComponentInjector, ComponentInjectorModule} from 'component-injector';

// the list of components which can be injected dynamically
const entryComponents: any[] = [HeroComponent];

@NgModule({
  declarations: [
    AppComponent,
    ContainerComponent,
    HeroComponent
  ],
  imports: [
    BrowserModule,
    ComponentInjectorModule
  ],
  providers: [],
  entryComponents: entryComponents, // <-- don't forget to specify the list in here as well !!!
  bootstrap: [AppComponent]
})
export class AppModule {

  constructor(private componentInjector: ComponentInjector) {
    // provide the entryComponents list - the list of components which can be injected dynamically
    this.componentInjector.setComponentFactories(entryComponents);
  }
  
}

Import the service into your service or other components:

import {ComponentInjector} from "component-injector";

add it as a parameter into your constructor, to inject it automatically and use it in the class methods:

export class ContainerComponent {
  @ViewChild('injectContainer', {read: ViewContainerRef}) injectContainer: ViewContainerRef;
  
  constructor(protected componentInjector: ComponentInjector) {
  }
  
  protected injectComponent(componentSelector: string): ComponentRef<any> {
    let result: ComponentRef<any>;
    if (componentSelector) {
      result = this.componentInjector.inject(this.injectContainer, componentSelector);
    }

    return result;
  }
}

where injectContainer is the container element defined in your HTML template and where the dynamic components will be injected (HTML template of the ContainerComponent component):

<div #injectContainer></div>

4. Methods

inject(container: ViewContainerRef, componentSelector: string): ComponentRef

Inject a component into a ViewContainerRef element

Parameters:
container - ViewContainerRef element where to inject the component
componentSelector - Selector of the component which should be injected

Return:
Method returns ComponentRef of the injected component.

setProperties(componentRef: ComponentRef, properties: any): void

Set public properties of the component specified by the componentRef

Parameters:
componentRef - ComponentRef object where should be attached the properties
properties - Object which contains the keys (name of the property) and values (value of the property)

Return:
Method returns nothing - void.

remove(componentRef: ComponentRef): void

Remove a component by its ComponentRef

Parameters:
componentRef - ComponentRef which should be removed

Return:
Method returns nothing - void.

setComponentFactories(componentsList: Type[]): void

Define the factories for the entryComponents list

Parameters:
componentsList - the list of entryComponents defined in the the app's module @NgModule()

Return:
Method returns nothing - void.

5. Build

To build the final package run this command:

ng build component-injector

The build process will generate the packed sources into the dist folder.

6. Publish to npm

To publish the new version to npm, go into the dist folder:

cd ./dist/component-injector

and publish it to npm:

npm publish --access public

7. Git repository

https://github.com/kageoni/component-injector

npmjs: https://www.npmjs.com/package/component-injector

8. Version

2.0.0