# @flywine93/ngx-dyncmp

> A lightweight dynamic component directive with full life-cycle support for inputs and outputs.

Latest version **9.0.7** (published 2020-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @flywine93/ngx-dyncmp
pnpm add @flywine93/ngx-dyncmp
yarn add @flywine93/ngx-dyncmp
bun add @flywine93/ngx-dyncmp
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 9.0.7 |
| Published | 2020-09-23 |
| First published | 2020-09-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 120 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | flywine |
| Maintainers | flywine |
| Keywords | angular, angular dynamic component, dynamic component directive, dynamic component |

## Links

- npm: https://www.npmjs.com/package/@flywine93/ngx-dyncmp
- Repository: https://github.com/93Alliance/ngx-dyncmp
- Homepage: https://github.com/93Alliance/ngx-dyncmp#readme
- Issues: https://github.com/93Alliance/ngx-dyncmp/issues
- npm.io page: https://npm.io/package/@flywine93/ngx-dyncmp

## Recent versions

- 9.0.7 (latest) — 2020-09-23
- 9.0.6 — 2020-09-19
- 9.0.5 — 2020-09-18

## README

# NgxDyncmp

[![npm](https://img.shields.io/npm/dt/@flywine93/ngx-dyncmp.svg)]()
[![npm](https://img.shields.io/npm/l/@flywine93/ngx-dyncmp.svg)]()
[![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE)

A lightweight dynamic component directive with full life-cycle support for inputs and outputs.

[![NPM](https://nodei.co/npm/@flywine93/ngx-dyncmp.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/@flywine93/ngx-dyncmp/)

| Angular | ngx-dyncmp| NPM package |
|  :---:  |   :---:   |   :---:     |
| 9.x.x   |   9.x.x   | @flywine93/ngx-dyncmp@^9.0.0 |

## Demo

[dynamic component demo online](https://93alliance.github.io/ngx-dyncmp/)

[stackblitz demo](https://stackblitz.com/edit/angular-ngx-dyncmp-demo?file=src/app/app.component.ts)

## Installation

```
npm install @flywine93/ngx-dyncmp --save
```

## Features

- Lightweight
- Data synchronization
- A single input attribute triggers update


## Usage

Import `NgxDyncmpModule` where you need to render dynamic components:

```typescript
import { NgxDyncmpModule } from '@flywine93/ngx-dyncmp';

@NgModule({
  imports: [NgxDyncmpModule],
})
export class MyModule {}
```

### ngxDyncCmp Directive

The following example will dynamically create a Todo component.

```html
<ng-container *ngxDyncCmp="component"></ng-container>
 <!-- or -->
 <!-- <ng-container [ngxDyncCmp]="component"></ng-container> -->
```

```typescript
export class AppComponent {
  component = TotoComponent;
  // ...
}
```

### inputs Property

If the dynamic component has Input properties, you can bind them with the `inputs` property.

`todo component`
```html
<div>
    <mat-checkbox [(ngModel)]="todo.checked" (change)="change($event)">{{todo.text}}</mat-checkbox>
</div>
```
```typescript
export class TotoComponent {
  @Input() todo: {checked: boolean, text: string};
}
```

`app component`
```html
<ng-container
    [ngxDyncCmp]="component"
    [inputs]="todoInputs">
</ng-container>
```

```typescript
export class AppComponent {
  component = TotoComponent;
  todoInputs = {
    todo: {
      checked: false,
      text: 'Do Homework'
    }
  };
}
```
- The todo within this todoInputs is the name of TotoComponent's Input property.
- When a deep copy of the todo value within todoInputs occurs, the todo value within TotoComponent will be changed.

### outputs Property

When dynamic components have output properties inside, you can bind them using the `outputs` property.

`todo component`
```html
<div>
    <mat-checkbox [(ngModel)]="todo.checked" (change)="change($event)">{{todo.text}}</mat-checkbox>
</div>
```
```typescript
export class TotoComponent {
  @Input() todo: {checked: boolean, text: string};
  @Output() selected = new EventEmitter<{checked: boolean, text: string}>();

  change(event: MatCheckboxChange): void {
    this.selected.emit(this.todo);
  }
}
```

`app component`
```html
<ng-container
    [ngxDyncCmp]="component"
    [inputs]="todoInputs"
    [outputs]="todoOutputs">
</ng-container>
```

```typescript
export class AppComponent {
  component = TotoComponent;
  todoInputs = {
    todo: {
      checked: false,
      text: 'Do Homework'
    }
  };

  todosOutputs = {
    selected: (e: any) => {
      console.log(e)
    }
  };
}
```

## License

The MIT License (see the [LICENSE](https://github.com/93Alliance/ngx-DYNCMP/blob/master/LICENSE) file for the full text)

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