How to dynamically create component instance with input/output from a service and inject it to DOM separately?

In case someone like me still looking for a simple and clear solution nowdays - here it is. I got it from @angular/cdk https://github.com/angular/components/tree/master/src/cdk and made a simple service.

import {
    Injectable,
    ApplicationRef,
    ComponentFactoryResolver,
    ComponentRef,
    Injector,
    EmbeddedViewRef
} from '@angular/core';

export type ComponentType<T> = new (...args: any[]) => T;

@Injectable({
    providedIn: 'root'
})
export class MyService {

    constructor(
        private _appRef: ApplicationRef,
        private _resolver: ComponentFactoryResolver,
        private _injector: Injector
    ) { }

    private _components: ComponentRef<any>[] = [];

    add<T>(
        component: ComponentType<T> | ComponentRef<T>,
        element?: Element | string
    ): ComponentRef<T> {
        const componentRef = component instanceof ComponentRef
            ? component
            : this._resolver.resolveComponentFactory(component).create(this._injector);
        this._appRef.attachView(componentRef.hostView);
        if (typeof element === 'string') {
            element = document.querySelector(element);
        }
        if (!element) {
            element = document.body;
        }
        element.appendChild(
            (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement
        );
        this._components.push(componentRef);
        return componentRef;
    }

    remove(dialog: number | ComponentRef<any>): boolean {
        let componentRef;
        if (typeof dialog === 'number' && this._components.length > dialog)  {
            componentRef = this._components.splice(dialog, 1)[0];
        }
        else {
            for (const cr of this._components) {
                if (cr === dialog) {
                    componentRef = cr;
                }
            }
        }
        if (componentRef) {
            this._remove(componentRef);
            return true;
        }
        return false;
    }

    private _remove(componentRef: ComponentRef<any>) {
        this._appRef.detachView(componentRef.hostView);
        componentRef.destroy();
    }

    clear() {
        while (this._components.length > 0) {
            this._remove(this._components.pop());
        }
    }

    getIndex(componentRef: ComponentRef<any>): number {
        return this._components.indexOf(componentRef);
    }

}

You can pass ComponentClass or ComponentRef to add and Element or any querySelector string pointing to any DOM element where you want to attach your component as second argument (or nothing, then it assumes you want to attach to body).

const cr = this._service.add(MyComponent); // will create MyComponent and attach it to document.body or
const cr = this._service.add(MyComponent, this.someElement); // to attach to Element stored in this.someElement or
const cr = this._service.add(MyComponent, 'body div.my-class > div.my-other-div'); // to search for that element and attach to it
const crIndex = this._service.getIndex(cr);
cr.instance.myInputProperty = 42;
cr.instance.myOutputEmitter.subscribe(
    () => {
        // do something then for example remove this component
        this._service.remove(cr);
    }
);
this._service.remove(crIndex); // remove by index or
this._service.remove(cr); // remove by reference or
this._service.clear(); // remove all dynamically created components

P.S. Don't forget to add your dynamic components to entryComponents: [] of @NgModule

Maybe this plunker will help you: https://plnkr.co/edit/iTG7Ysjuv7oiDozuXwj6?p=preview

As far as i know, you will need the ViewContainerRef inside of your service. But the component calling your service can add it as an parameter, like this:

(just a the service.. see plunker for full working example)

import { Injectable, ViewContainerRef, ReflectiveInjector, ComponentFactoryResolver, ComponentRef } from '@angular/core';

import { HelloComponent, HelloModel } from './hello.component';

@Injectable()
export class DynamicCompService {

  constructor (private componentFactoryResolver: ComponentFactoryResolver) { }

  public createHelloComp (vCref: ViewContainerRef, modelInput: HelloModel): ComponentRef {

    let factory = this.componentFactoryResolver.resolveComponentFactory(HelloComponent);

    // vCref is needed cause of that injector..
    let injector = ReflectiveInjector.fromResolvedProviders([], vCref.parentInjector);

    // create component without adding it directly to the DOM
    let comp = factory.create(injector);

    // add inputs first !! otherwise component/template crashes ..
    comp.instance.model = modelInput;

    // all inputs set? add it to the DOM ..
    vCref.insert(comp.hostView);

    return comp;
  }
}

In my case I was looking for a solution without using ComponentFactoryResolver that is now deprecated:

Deprecated: Angular no longer requires Component factories. Please use other APIs where Component class can be used directly.

And I found this solution from a colleague of mine by using createComponent instead.

Here is an alternative approach to adding a component dynamically and managing communication between that component and its parent.

The specific example is for a dialog box with a form, which is a common use case.

Demo on Stackblitz.

Repo with code

• dialog-wrapper is a dialog component
• dialog-form is an example of a dynamic component being injected into dialog-wrapper, with the necessary supporting services.
• name (Alice) is an example of arbitrary data being passed from the parent component to dialog-form via dialog-wrapper
• An object with name and favouriteFood is then passed back to the parent when the form in dialog-form is submitted. This also tiggers the parent component to close dialog-wrapper.

I've tried to keep the code as straightforward as possible so it can be easily retasked. The dialog wrapper itself is fairly simple; most of the heavy lifting is in the injected component and the parent component.

This is not exactly the architecture outlined in the OP, but I believe it satisfies:

I need independent component objects that can be injected to anywhere, anytime I want.

    buildComponent = (
    componentType: Type<any>,
    inputs?: ComponentInputs
): ComponentRef<any> => {
    const appRef = this.injector.get(ApplicationRef);
    const component = createComponent(componentType, {
        environmentInjector: appRef.injector,
    });
    const componentInstance = component.instance;
    if (inputs) {
        Object.assign(componentInstance, inputs);
    }

    return componentInstance;
};

This works as intended. I guess ApplicationRef can't be casually injected in constructor because of Circular Dependency but this works properly. You might want to make appRef a private member of the service because it should be taking some resource to constantly get a reference. But if you only occasionally build components, this will work.

And an example is:

const component2 = this.dynamicComponentService.buildComponent(
                DateFormatterComponent,
                componentInputs
            );

Component Inputs are here to automatically set Inputs of the component.