ngx-dom-component

$3

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
`

$3

Import NgxDOMComponentModule into your root module.

$3

`ts
import { Component, OnInit, ViewContainerRef, ViewChild } from '@angular/core'
import { NgxDOMComponentService, NgxDOMComponentCreateOptions, NgxDOMComponent } from 'ngx-dom-component';

@Component({
selector: 'my-component',
template: '{{ message }}'
})
export class MyComponent {
@Input()
public message;
}

@Component({
selector: 'my-app',
template:


})
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);
}
}
`

$3

`ts
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
}
`

$3

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

`ts
createContainer(viewContainerRef: ViewContainerRef): NgxDOMComponentContainer;
`
Create a new NgxDOMComponentContainer.

`ts
createComponent(options: NgxDOMComponentCreateOptions): NgxDOMComponent;
`
Create a new NgxDOMComponent and inject it onto the dom.

$3

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
`ts
@NgxEntryComponent({
inputs: ['message']
outputs: []
})
@Component({
selector: 'my-component',
template: 'some html'
})
export class MyComponent {
@Input()
public message: string;
//...
}
`

$3

Create a wrapper for the ViewContainerRef, allowing you not providing the viewContainerRef attribute of NgxDOMComponentCreateOptions.
`ts
class NgxDOMComponentContainer {
viewContainerRef: ViewContainerRef;
constructor(viewContainerRef: ViewContainerRef);
create(options: NgxDOMComponentCreateOptions): NgxDOMComponent;
}
`
Example:
`ts
this.ngxDOMComponentContainer = new NgxDOMComponentContainer(this.contentContainerRef);
this.ngxDOMComponentContainer.create({
componentType: MyComponent,
inputs: {
message: 'Hello World!'
}
});
`

$3

Create and inject a Angular 5+ Component into the DOM.
`ts
class NgxDOMComponent {
constructor(options: NgxDOMComponentCreateOptions);

readonly viewContainerRef: ViewContainerRef; // the parent container
readonly componentRef: ComponentRef; // 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
}
`

$3

`html
[config]="{
component: myComponent,
inputs: {
message: 'Hello World!'
}
}"
>
`
Inject an angular 2+ component. The config is the same as NgxDOMComponentOptions` except that you don't need to provide a container.