https://github.com/Indigosoft/ngxd
✨🦊 NgComponentOutlet + Data-Binding + Full Lifecycle = NgxComponentOutlet for Angular 7, 8, 9, 10, 11, 12, 13, 14, 15, 16+
https://github.com/Indigosoft/ngxd
angular dynamic-components
Last synced: 8 months ago
JSON representation
✨🦊 NgComponentOutlet + Data-Binding + Full Lifecycle = NgxComponentOutlet for Angular 7, 8, 9, 10, 11, 12, 13, 14, 15, 16+
- Host: GitHub
- URL: https://github.com/Indigosoft/ngxd
- Owner: Indigosoft
- License: mit
- Created: 2018-03-03T18:38:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-30T19:05:32.000Z (almost 2 years ago)
- Last Synced: 2025-03-05T13:50:17.900Z (8 months ago)
- Topics: angular, dynamic-components
- Language: TypeScript
- Homepage:
- Size: 3.95 MB
- Stars: 322
- Watchers: 14
- Forks: 31
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngxd - NgComponentOutlet + Data-Binding + Full Lifecycle = NgxComponentOutlet for Angular 7+. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngxd - NgComponentOutlet + Data-Binding + Full Lifecycle = NgxComponentOutlet for Angular 7+. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngxd - NgComponentOutlet + Data-Binding + Full Lifecycle = NgxComponentOutlet for Angular 7+. (Table of contents / Third Party Components)
README
# ✨🦊 NGX Dynamic for Angular Ivy and Angular 7, 8, 9, 10, 11, 12, 13, 14, 15, 16+
> 🥳 Best way to quickly use Dynamic Components with [Angular](https://angular.io/)
[](https://www.npmjs.com/package/@ngxd/core)
[](https://www.npmjs.com/package/@ngxd/core)
[](https://www.npmjs.com/package/@ngxd/core)
[](https://travis-ci.com/IndigoSoft/ngxd)
[](https://github.com/IndigoSoft/ngxd/blob/master/LICENSE)
[](https://github.com/IndigoSoft/ngxd/graphs/contributors)
[](https://github.com/IndigoSoft/ngxd/pulls)
[](https://github.com/IndigoSoft/ngxd/issues)
[](https://github.com/IndigoSoft/ngxd)
Use like ```NgComponentOutlet``` but with ```@Input``` and ```@Output``` auto bindings:
```html
```
Here is a [demo example](https://stackblitz.com/edit/angular-simple-dynamic) showing NGX Dynamic and Angular in action.
* [Getting started](#getting-started)
* [Use cases](#use-cases)
* [1. Binding inputs and outputs](#1-binding-inputs-and-outputs)
* [2. Switching the component](#2-switching-the-component)
* [3. Lazy loading the dynamic component](#3-lazy-loading-the-dynamic-component)
* [4. Content projection](#4-content-projection)
# Getting started
## Step 1: Install ```@ngxd/core```:
```bash
npm install --save @ngxd/core
# or
yarn add @ngxd/core
```
> Note: @ngxd/core@12 only supports angular with Ivy is enabled
> Note: If you want to use @ngxd/core with a specific angular version, you have to install @ngxd/core which version you need:
> * @angular/core@7 => npm install @ngxd/core@7
> * @angular/core@8 => npm install @ngxd/core@8
> * @angular/core@9 => npm install @ngxd/core@9
> * @angular/core@10 => npm install @ngxd/core@10
> * @angular/core@11 => npm install @ngxd/core@11
> * @angular/core@12 => npm install @ngxd/core@12
> * @angular/core@13 => npm install @ngxd/core@13
> * @angular/core@14 => npm install @ngxd/core@14
> * @angular/core@15 => npm install @ngxd/core@15
> * @angular/core@16 => npm install @ngxd/core@16
## Step 2: Import the NgxdModule:
```typescript
import { NgxdModule } from '@ngxd/core';
@NgModule({
declarations: [ AppComponent ],
// have import NgxdModule here 👇
imports: [ BrowserModule, NgxdModule ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
```
## Step 3: Use NgxComponentOutlet directly:
```typescript
@Component({
template: `
`
// using @ngxd/core 👆
})
class MyComponent {
// your dynamic component 👇
component = DynamicComponent;
// 🥳 inputs and outputs will binding automatically
@Input() entity;
@Output() action;
}
```
# Use cases
There are several modes of operation of the directive.
## 1. Binding inputs and outputs
A simple variant of binding through the parent component.
```typescript
@Component({
template: `
`
// using @ngxd/core 👆
})
class MyComponent {
// your dynamic component 👇
component = DynamicComponent;
// 🥳 inputs and outputs will binding automatically
@Input() entity;
@Output() action;
}
```
### Binding inputs through the context
> Note: You not permitted to passing the outputs using the context.
> The context will be passing inputs only.
In the example below, you can see the binding through the context. This is useful when you need to display something through *ngFor. Note that the context has a higher priority than the inputs in the component.
```html
```
## 2. Switching the component
To switch a component, you just need to overwrite it with another one.
```typescript
class AppComponent {
ngOnChanges(changes: SimpleChanges): void {
if ('type' in changes) {
switch (this.type) {
case 'number':
this.component = NumberComponent;
break;
case 'text':
this.component = TextComponent;
break;
default:
this.component = DefaultComponent;
}
}
}
}
```
### Switching the component using pipe and resolver
If you have a bunch of components, then you go to switch between them. To do this, you can use NgxdResolvePipe and NgxdResolver to help you isolate dynamic component selection.
```html
```
## 3. Lazy loading the dynamic component
If you need to load and display a dynamic component lazily, then you can use lazy import and pass it to the async pipe.
```typescript
component = import('./my-lazy-component')
.then(m => m.MyLazyComponent);
```
```html
```
### Lazy loading bunch of dynamic components
You can also load a bunch of components lazily and render them.
```typescript
resolver = import('./my-lazy-resolver')
.then(m => m.myLazyResolver);
```
```html
```
## 4. Content projection
If you want to use the `````` and pass the content to your dynamic component, you have to check the example below.
[Click to here](https://github.com/IndigoSoft/ngxd/issues/30#issuecomment-627472367)
# 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 | ❌ |
# API
| Input | Type | Default | Required | Description |
| ----------------------------------------- | -------------------------- | ------- | -------- | ----------- |
| ```[ngxComponentOutlet]``` | ```Type``` | n/a | yes | |
| ```[ngxComponentOutletContext]``` | ```any``` | n/a | no | |
| ```[ngxComponentOutletInjector]``` | ```Injector``` | n/a | no | |
| ```[ngxComponentOutletContent]``` | ```any[][]``` | n/a | no | |
| Output | Type | Description |
| ----------------------------------------- | -------------------------- | ----------- |
| ```(ngxComponentOutletActivate)``` | ```any``` | |
| ```(ngxComponentOutletDeactivate)``` | ```any``` | |