uv-charts-dashboard/src/app/components/chart-details/chart-details.ts

A dashboard for uvCharts examples

import {
    Component,
    ViewContainerRef,
    ViewChild,
    ReflectiveInjector,
    ComponentFactoryResolver,
    Input
} from '@angular/core';

import { entryList } from './entry-components';

@Component({
    selector: 'chart-details',
    entryComponents: [
        ...entryList
    ],
    template: `<div #dynamicComponentContainer></div>`
})

export default class ChartDetailsComponent {
    currentComponent = null;
    @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;

    constructor(private resolver: ComponentFactoryResolver) { }

    // component: Class for the component you want to create
    // inputs: An object with key/value pairs mapped to input name/input value
    @Input() set componentData(data: { component: any }) {
        if (!data) {
            return;
        }
        // We create an injector out of the data we want to pass down and this components injector
        let injector = ReflectiveInjector.fromResolvedProviders([], this.dynamicComponentContainer.parentInjector);

        // We create a factory out of the component we want to create
        let factory = this.resolver.resolveComponentFactory(data.component);

        // We create the component using the factory and the injector
        let component = factory.create(injector);

        // We insert the component into the dom container
        this.dynamicComponentContainer.insert(component.hostView);

        // We can destroy the old component is we like by calling destroy
        if (this.currentComponent) {
            this.currentComponent.destroy();
        }

        this.currentComponent = component;
    }
}