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

Stackblitz

Github

Getting started

Step 1: Install `ngx-component-outlet`:

NPM

npm install --save ngx-component-outlet

Yarn

yarn add ngx-component-outlet

Step 2: Import the NgxComponentOutletModule:

import { NgxComponentOutletModule } from 'ngx-component-outlet';
 
@NgModule({
  declarations: [ AppComponent ],
  imports: [ NgxComponentOutletModule.forRoot() ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Step 3: Create components that your want to use dynamically:

@Component({
    selector: 'app-dynamic-comp-a',
    template: `I'm Dynamic Component A. Hello, {{ name }}!`
})
export class CompAComponent {
    @Input() name: string;
}

@Component({
    selector: 'app-dynamic-comp-b',
    template: `I'm Dynamic Component B. Hello, {{ name }}!`
})
export class CompBComponent {
    @Input() name: string;
}

Step 4: Add components to `declarations` and `entryComponents`:

@NgModule({
    ...
    declarations: [ ..., CompAComponent, CompBComponent ],
    entryComponents: [ CompAComponent, CompBComponent ]
})
export class AppModule {}

Step 5: Create a host component with the same inputs/outputs:

@Component({
    selector: 'app-host-for-dynamic',
    template: ''
})
export class HostComponent {
    @Input() name: string;
}

Step 6: Add the component to `declarations`:

@NgModule({
    ...
    declarations: [ ..., HostComponent ],
    ...
})
export class AppModule {}

Step 7: Now show dynamic component in AppComponent:

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
        <app-host-for-dynamic [ngxComponentOutlet]="componentA"
          [name]="'Angular 5!'"></app-host-for-dynamic>
        
        <app-host-for-dynamic [ngxComponentOutlet]="componentB"
          [name]="'Angular 6?'"></app-host-for-dynamic>
    `
})
export class AppComponent {
    componentA = CompAComponent;
    componentB = CompBComponent;
}

And you will have in AppModule:

import { NgxComponentOutletModule } from 'ngx-component-outlet';
 
@NgModule({
  imports:      [ NgxComponentOutletModule.forRoot() ],
  declarations: [ AppComponent, CompAComponent, CompBComponent, HostComponent ],
  entryComponents: [ CompAComponent, CompBComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

API

Input	Type	Default	Required
`[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.

ngx-component-outlet

ngx-component-outlet

Example Usage

Comparison

Demo

Heroes

Table And Form

Editable Demo

Getting started

Step 1: Install `ngx-component-outlet`:

NPM

Yarn

Step 2: Import the NgxComponentOutletModule:

Step 3: Create components that your want to use dynamically:

Step 4: Add components to `declarations` and `entryComponents`:

Step 5: Create a host component with the same inputs/outputs:

Step 6: Add the component to `declarations`:

Step 7: Now show dynamic component in AppComponent:

And you will have in AppModule:

API

Advanced Use Cases

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

ngx-component-outlet

ngx-component-outlet

Example Usage

Comparison

Demo

Heroes

Table And Form

Editable Demo

Getting started

Step 1: Install ngx-component-outlet:

NPM

Yarn

Step 2: Import the NgxComponentOutletModule:

Step 3: Create components that your want to use dynamically:

Step 4: Add components to declarations and entryComponents:

Step 5: Create a host component with the same inputs/outputs:

Step 6: Add the component to declarations:

Step 7: Now show dynamic component in AppComponent:

And you will have in AppModule:

API

Advanced Use Cases

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Step 1: Install `ngx-component-outlet`:

Step 4: Add components to `declarations` and `entryComponents`:

Step 6: Add the component to `declarations`:

Weekly Downloads