Angular2 component factory resolver example

child-1.component.ts

import { Component } from '@angular/core';
import { ChildBaseComponent } from './child-base.component';

@Component({
	template: `This is Child Component 1`
})
export class Child1Component extends ChildBaseComponent {
    
    constructor(){
        //Run base constructor
        super();
        //Child component constructor logic...
        console.log('Child Component 1');
    }
    
}

child-2.component.ts

import { Component } from '@angular/core';
import { ChildBaseComponent } from './child-base.component';

@Component({
	template: `This is Child Component 2`
})
export class Child2Component extends ChildBaseComponent {
    
    constructor(){
        //Run base constructor
        super();
        //Child component constructor logic...
        console.log('Child Component 1');
    }
    
}

child-base.component.ts

import { Component } from '@angular/core';

export class ChildBaseComponent {
}

parent.component.ts

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

import { Child1Component } from './child-1.component';
import { Child2Component } from './child-2.component';

@Component({
    selector: 'parent',
    template: `
        <div #target></div>
    `
})
export class ParentComponent {
    @Input() child: string;
    @Input() value: string;
    
    //Get tag child component will be placed
    @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
	private componentRef:ComponentRef<any>;

	//Child components
    private children = {
    	child1: Child1Component,
    	child2: Child2Component
    };
    
    constructor(private compiler: ComponentFactoryResolver) {}

    //Pass through value to child component
    renderComponent(){
		if (this.componentRef) this.componentRef.instance.value = this.value;
	}

	//Compile child component
    ngAfterContentInit() {
    	let childComponent = this.children[this.child || 'child1'];
        //Resolve child component
        let componentFactory = this.compiler.resolveComponentFactory(childComponent);
        this.componentRef = this.target.createComponent(componentFactory);
        this.renderComponent();
    }

    //Pass through value to child component when value changes
	ngOnChanges(changes: Object) {
		this.renderComponent();
	}
}

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

import { Child1Component } from './child-1.component';
import { Child2Component } from './child-2.component';

@component({
selector: 'parent',
template: <div #target></div>
})
export class ParentComponent {
@input() child: string;
@input() value: string;

//Get tag child component will be placed
@ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
private componentRef:ComponentRef<any>;

//Child components
private children = {
	child1: Child1Component,
	child2: Child2Component
};

constructor(private compiler: ComponentFactoryResolver) {}

//Pass through value to child component
renderComponent(){
	if (this.componentRef) this.componentRef.instance.value = this.value;
}

//Compile child component
ngAfterContentInit() {
	let childComponent = this.children[this.child || 'child1'];
    //Resolve child component
    let componentFactory = this.compiler.resolveComponentFactory(childComponent);
    this.componentRef = this.target.createComponent(componentFactory);
    this.renderComponent();
}

//Pass through value to child component when value changes
ngOnChanges(changes: Object) {
	this.renderComponent();
}

}