ngx-component-outlet
Best way to quickly use Dynamic Components with Angular
Example Usage
Use like NgComponentOutlet
but with @Input/@Output
auto bindings:
<!-- host component --><app-dynamic <!-- dynamic component --> [ngxComponentOutlet]="component" <!-- regular input --> [entity]="entity" <!-- regular output --> (action)="onAction($event)"></app-dynamic>
Comparison
Feature | NgxComponentOutlet | ComponentFactoryResolver | NgComponentOutlet |
---|---|---|---|
Friendliness | ⭐⭐⭐ | ⭐ | ⭐⭐ |
Dynamic Components | ✅ | ✅ | ✅ |
AOT support | ✅ | ✅ | ✅ |
Reactivity | ✅ | ✅ | ✅ |
Injector | ✅ | ✅ | ✅ |
NgModule | ✅ | ✅ | ✅ |
projectionNodes | ✅ | ✅ | ✅ |
Component Access | ✅ | ✅ | ❌ |
Lifecycle OnChanges | ✅ | ⭕️ manually | ❌ |
Binding @Input() |
✅ | ⭕️ manually | ❌ |
Binding @Output() |
✅ | ⭕️ manually | ❌ |
Activate Event | ✅ | ⭕️ manually | ❌ |
Deactivate Event | ✅ | ⭕️ manually | ❌ |
Demo
Heroes
List of heroes
Table And Form
Table of heroes with table schema form
Editable Demo
Getting started
ngx-component-outlet
:
Step 1: Install NPM
npm install --save ngx-component-outlet
Yarn
yarn add ngx-component-outlet
Step 2: Import the NgxComponentOutletModule:
;
Step 3: Create components that your want to use dynamically:
declarations
and entryComponents
:
Step 4: Add components to
Step 5: Create a host component with the same inputs/outputs:
declarations
:
Step 6: Add the component to
Step 7: Now show dynamic component in AppComponent:
;
And you will have in AppModule:
;
API
Input | Type | Default | Required | Description |
---|---|---|---|---|
[ngxComponentOutlet] |
Type<any> |
n/a | yes | |
[ngxComponentOutletInjector] |
Injector |
n/a | no | |
[ngxComponentOutletContent] |
any[][] |
n/a | no | |
[ngxComponentOutletNgModuleFactory] |
NgModuleFactory<any> |
n/a | no |
Output | Type | Description |
---|---|---|
(ngxComponentOutletActivate) |
any |
|
(ngxComponentOutletDeactivate) |
any |
Advanced Use Cases
Here is a demo repository showing ngx-component-outlet and Angular in action.