component-injector
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:
;
Register it in your application's imports
list of your @NgModule(...)
:
Using the method setComponentFactories()
provide the entryComponents
list of the application's @NgModule(...)
.
The file ./src/app/app.module.ts
:
;; ;;; ; // the list of components which can be injected dynamically;
Import the service into your service or other components:
;
add it as a parameter into your constructor, to inject it automatically and use it in the class methods:
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):
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