# ngx-component-outlet

> NgComponentOutlet + Data-Binding + Full Lifecycle = NgxComponentOutlet for Angular 5, 6+

Latest version **0.0.8** (published 2018-06-10) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ngx-component-outlet
pnpm add ngx-component-outlet
yarn add ngx-component-outlet
bun add ngx-component-outlet
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2018-06-10 |
| First published | 2018-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 211.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 320 |
| Author | thekiba |
| Maintainers | thekiba |
| Keywords | angular, angular2, angular4, angular5, angular6, angular-library, angular-components, component-library, dynamic-components, typescript |

## Links

- npm: https://www.npmjs.com/package/ngx-component-outlet
- Repository: https://github.com/thekiba/ngx-component-outlet
- Issues: https://github.com/thekiba/ngx-component-outlet/issues
- npm.io page: https://npm.io/package/ngx-component-outlet

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.0.8 (latest) — 2018-06-10
- 0.0.7 — 2018-05-18
- 0.0.6 — 2018-05-15
- 0.0.5 — 2018-05-03
- 0.0.4 — 2018-05-03
- 0.0.3 — 2018-04-05
- 0.0.2 — 2018-04-05
- 0.0.1 — 2018-04-05
- 0.0.0 — 2018-04-05

## README

# ngx-component-outlet

> Best way to quickly use Dynamic Components with [Angular](https://angular.io/)

[![npm](https://img.shields.io/npm/v/ngx-component-outlet.svg?style=flat-square)](https://www.npmjs.com/package/ngx-component-outlet)
[![npm License](https://img.shields.io/npm/l/ngx-component-outlet.svg?style=flat-square)](https://github.com/thekiba/ngx-component-outlet/blob/master/LICENSE)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square)](https://conventionalcommits.org)
[![CircleCI](https://img.shields.io/circleci/project/github/thekiba/ngx-component-outlet/master.svg?label=Circle%20CI&style=flat-square)](https://circleci.com/gh/thekiba/ngx-component-outlet)
[![Travis](https://img.shields.io/travis/thekiba/ngx-component-outlet/master.svg?label=Travis%20CI&style=flat-square)](https://travis-ci.org/thekiba/ngx-component-outlet)

[![GitHub contributors](https://img.shields.io/github/contributors/thekiba/ngx-component-outlet.svg?style=flat-square)](https://github.com/thekiba/ngx-component-outlet)
[![GitHub PR Stats](http://issuestats.com/github/thekiba/ngx-component-outlet/badge/pr?style=flat-square)](http://issuestats.com/github/thekiba/ngx-component-outlet)
[![GitHub Issue Stats](http://issuestats.com/github/thekiba/ngx-component-outlet/badge/issue?style=flat-square)](http://issuestats.com/github/thekiba/ngx-component-outlet)

[![GitHub stars](https://img.shields.io/github/stars/thekiba/ngx-component-outlet.svg?label=GitHub%20Stars&style=flat-square)](https://github.com/thekiba/ngx-component-outlet)
[![npm Downloads](https://img.shields.io/npm/dw/ngx-component-outlet.svg?style=flat-square)](https://www.npmjs.com/package/ngx-component-outlet)

## Example Usage

Use like ```NgComponentOutlet``` but with ```@Input/@Output``` auto bindings:

```angular2html
<!-- 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](https://ngx-component-outlet-demo.stackblitz.io/)

List of heroes

#### [Table And Form](https://ngx-component-outlet-demo.stackblitz.io/table)

Table of heroes with table schema form

#### Editable Demo

[Stackblitz](https://stackblitz.com/edit/ngx-component-outlet-demo)

[Github](https://github.com/thekiba/ngx-component-outlet/tree/master/src)

## Getting started

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

#### NPM

```bash
npm install --save ngx-component-outlet
```

#### Yarn

```bash
yarn add ngx-component-outlet
```

### Step 2: Import the NgxComponentOutletModule:

```typescript
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:

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

```typescript
@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```:

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

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

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

### Step 6: Add the component to ```declarations```:

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

### Step 7: Now show dynamic component in AppComponent:

```typescript
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:

```typescript
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 | 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](https://github.com/thekiba/ngx-component-outlet/tree/master/src) in action.

---
_Source: https://npm.io/package/ngx-component-outlet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._