ngx-dom-component

NGX-DOM-Component

Provide component injection and manipulation in DOM for your angular 5+ application :

Allow you to inject component into the DOM including inputs/outputs. And then manipulating this component by removing/deleting it from the DOM.

npm i ngx-dom-component --save

NgxDOMComponentModule

Import NgxDOMComponentModule into your root module.

Example

import { Component, OnInit, ViewContainerRef, ViewChild } from '@angular/core'
import { NgxDOMComponentService, NgxDOMComponentCreateOptions, NgxDOMComponent } from 'ngx-dom-component';
 
@Component({
  selector: 'my-component',
  template: '<span>{{ message }}</span>'
})
export class MyComponent {
    @Input()
    public message;
}
 
@Component({
  selector: 'my-app',
  template: `
    <div class="container">
      <ng-template #contentContainer></ng-template>
    </div>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('contentContainer', { read: ViewContainerRef })
  public contentContainerRef: ViewContainerRef;
 
  constructor(private ngxDOMComponentService: NgxDOMComponentService) {}
 
  ngOnInit() {
    this.ngxDOMComponentService.init(); // DO NOT FORGET TO INIT !!!!
    let child: NgxDOMComponent  = this.ngxDOMComponentService.create({
      viewContainerRef: contentContainerRef,
      componentType: MyComponent,
      inputs: {
        message: 'Hello World!'
      }
    });
 
    setTimeout(() => {
      child.destroy();
    }, 5000);
  }
}

NgxDOMComponentOptions

interface NgxDOMComponentOptions {
  viewContainerRef?: ViewContainerRef; // the parent of the component
  componentType: any; // the component class
  inputs?: { [key: string] : any }; // a list of inputs to provide to the component @Input
  outputs?: { [key: string] : Function }; // a list of output callbacks to provide to link with the component @Output
  index?: number; // the position where to inject your component
}

NgxDOMComponentService

Into your app.component.ts file, you must include the NgxDOMComponentService and then call init, or at least before any calls to the ngx-dom-component methods/constructor, etc...

createContainer(viewContainerRef: ViewContainerRef): NgxDOMComponentContainer;

Create a new NgxDOMComponentContainer.

createComponent(options: NgxDOMComponentCreateOptions): NgxDOMComponent;

Create a new NgxDOMComponent and inject it onto the dom.

NgxEntryComponent (Decorator)

In some case (ex: when compiling in AOT mode) the metadata properties are lost and the binding of the inputs/outputs becomes impossible. As a result you wont see your inputs changes (ngOnChanges) and the outputs wont be binded. If you encounter this situation, you can use the decorator NgxEntryComponent and provide directly the list of properties as inputs and outputs

@NgxEntryComponent({
  inputs: ['message']
  outputs: []
})
@Component({
  selector: 'my-component',
  template: 'some html'
})
export class MyComponent {
    @Input()
    public message: string;
    //...
}

NgxDOMComponentContainer

Create a wrapper for the ViewContainerRef, allowing you not providing the viewContainerRef attribute of NgxDOMComponentCreateOptions.

class NgxDOMComponentContainer {
  viewContainerRef: ViewContainerRef;
  constructor(viewContainerRef: ViewContainerRef);
  create(options: NgxDOMComponentCreateOptions): NgxDOMComponent;
}

Example:

this.ngxDOMComponentContainer = new NgxDOMComponentContainer(this.contentContainerRef);
this.ngxDOMComponentContainer.create({
  componentType: MyComponent,
  inputs: {
    message: 'Hello World!'
  }
});

NgxDOMComponent

Create and inject a Angular 5+ Component into the DOM.

class NgxDOMComponent {
  constructor(options: NgxDOMComponentCreateOptions);
 
  readonly viewContainerRef: ViewContainerRef; // the parent container
  readonly componentRef: ComponentRef<any>; // the component ref
  readonly componentType: any; // the component class
  readonly element: HTMLElement; // the dom element
  readonly instance: any; // the instance of the constructor
 
  insert(index?: number, viewContainerRef?: ViewContainerRef): this; // insert the component at a specific index in viewContainerRef
  move(index?: number, viewContainerRef?: ViewContainerRef): this;  // move the component at a specific index in viewContainerRef
  detach(): this; // detach the component from the dom
  destroy(): this; // destroy the component
 
  detectChanges(): void; // manually trigger a changes detection, calling ngOnChanges if some elements changed
}

NgxDOMComponentComponent

<ngx-dom-component
  [config]="{
    component: myComponent,
    inputs: {
      message: 'Hello World!'
    }
  }"
></ngx-dom-component>

Inject an angular 2+ component. The config is the same as NgxDOMComponentOptions except that you don't need to provide a container.