Nonviolent Pigeon Manifestation

    @ngxd/core
    TypeScript icon, indicating that this package has built-in type declarations

    12.0.1 • Public • Published

    🦊 NGX Dynamic for Angular Ivy and Angular 7, 8, 9, 10, 11, 12+

    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

    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
    [ngxComponentOutletNgModuleFactory] NgModuleFactory<any> n/a no
    Output Type Description
    (ngxComponentOutletActivate) any
    (ngxComponentOutletDeactivate) any

    Install

    npm i @ngxd/core

    DownloadsWeekly Downloads

    14,373

    Version

    12.0.1

    License

    MIT

    Unpacked Size

    382 kB

    Total Files

    38

    Last publish

    Collaborators

    • thekiba