Skip to content
forked from Indigosoft/ngxd

✨🦊 NgComponentOutlet + Data-Binding + Full Lifecycle = NgxComponentOutlet for Angular 7, 8, 9, 10, 11, 12, 13, 14, 15, 16+

License

Notifications You must be signed in to change notification settings

dbush-clickup/ngxd

This branch is 6 commits ahead of Indigosoft/ngxd:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f0ce8bf Β· Jan 30, 2024
Jan 18, 2024
Jul 17, 2020
Feb 19, 2020
Jan 30, 2024
Jul 17, 2020
Sep 27, 2018
Sep 27, 2019
May 23, 2023
Sep 27, 2019
Jan 27, 2022
Sep 27, 2019
Apr 3, 2019
May 23, 2023
Apr 5, 2018
Nov 8, 2018
May 23, 2023
May 23, 2023
May 18, 2018
Jan 18, 2024
Jan 29, 2024
Mar 3, 2018
Jul 17, 2020
Jul 17, 2020

Repository files navigation

✨🦊 NGX Dynamic for Angular Ivy and Angular 7, 8, 9, 10, 11, 12, 13, 14, 15, 16+

preview

πŸ₯³ Best way to quickly use Dynamic Components with Angular

Npm Npm Downloads Npm Downloads Weekly Travis Licence

GitHub Contributors GitHub PR GitHub Issue GitHub Stars

Use like NgComponentOutlet but with @Input and @Output auto bindings:

<ng-container *ngxComponentOutlet="component"></ng-container>

Here is a demo example showing NGX Dynamic and Angular in action.

Getting started

Step 1: Install @ngxd/core:

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:

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:

@Component({
  template: `
    <ng-container *ngxComponentOutlet="component"></ng-container>`
    // 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.

@Component({
  template: `
    <ng-container *ngxComponentOutlet="component"></ng-container>`
    // 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.

<ng-container *ngFor="let color of colors"
  <ng-container *ngxComponentOutlet="
      component; context: { color: color }
  "></ng-container>
</ng-container>

2. Switching the component

To switch a component, you just need to overwrite it with another one.

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.

<ng-container *ngxComponentOutlet="
    resolver | resolve : type
"></ng-container>

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.

component = import('./my-lazy-component')
  .then(m => m.MyLazyComponent);
<ng-container *ngxComponentOutlet="
    component | async
"></ng-container>

Lazy loading bunch of dynamic components

You can also load a bunch of components lazily and render them.

resolver = import('./my-lazy-resolver')
  .then(m => m.myLazyResolver);
<ng-container *ngxComponentOutlet="
    resolver | async | resolve : type
"></ng-container>

4. Content projection

If you want to use the <ng-content> and pass the content to your dynamic component, you have to check the example below.

Click to here

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<any> 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

About

✨🦊 NgComponentOutlet + Data-Binding + Full Lifecycle = NgxComponentOutlet for Angular 7, 8, 9, 10, 11, 12, 13, 14, 15, 16+

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 67.1%
  • HTML 31.6%
  • Other 1.3%