Component Loader Component

a.component.ts

import {
    Component, Input
} from '@angular/core';
import { IComponentLoader } from '../component-loader/IComponentLoader';
@Component({
    moduleId: module.id,
    selector: 'a-comp',
    template: `
    <h3>AComponent</h3>
    <ul>
        <li *ngFor="let item of data">{{item}}</li>
    </ul>
    `
})

export class AComponent implements IComponentLoader {
    @Input()
    data: any;
}

app.component.html

<h1>
  {{title}}
</h1>
<ng-container *ngFor="let component of components">
  <component-loader [component]="component.name" [data]="component.data"></component-loader>
</ng-container>

app.component.ts

import { Component } from '@angular/core';
import { AComponent, BComponent } from './components';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  components = [
    {
      name: AComponent,
      data: ['Apple', 'Banana', 'Carrot', 'Date']
    },
    {
      name: BComponent,
      data: ['Apple', 'Banana', 'Carrot', 'Date']
    }
  ];
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AComponent, BComponent } from './components';
import { ComponentLoaderModule } from './component-loader/component-loader.module';

@NgModule({
  declarations: [
    AComponent,
    BComponent,
    AppComponent
  ],
  entryComponents: [
    AComponent,
    BComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ComponentLoaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

b.component.ts

import {
    Component, Input
} from '@angular/core';
import { IComponentLoader } from '../component-loader/IComponentLoader';
@Component({
    moduleId: module.id,
    selector: 'b-comp',
    template: `
    <h3>BComponent</h3>
    <ul>
        <pre> {{ data | json: 4 }}</pre>
    </ul>
    `
})

export class BComponent implements IComponentLoader {
    @Input()
    data: any;
}

component-host.directive.ts

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[componentHost]' })
export class ComponentHostDirective {
    constructor(public viewContainerRef: ViewContainerRef) { }
}

component-loader.component.html

<ng-template componentHost></ng-template>

component-loader.component.ts

import {
    Component,
    AfterViewInit,
    ViewChild,
    ComponentFactoryResolver,
    Input,
    Type, ViewContainerRef
} from '@angular/core';
import { ComponentHostDirective } from '../directive';

@Component({
    moduleId: module.id,
    selector: 'component-loader',
    templateUrl: 'component-loader.component.html'
})

export class ComponentLoaderComponent implements AfterViewInit {

    @ViewChild(ComponentHostDirective)
    public componentHost: ComponentHostDirective;

    /**
     * Component to be rendered.
     */
    @Input()
    public component: Type<any>;

    /**
     * Data required by component to be rendered.
     */
    @Input()
    public data: any;

    constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
        this.renderComponent = this.renderComponent.bind(this);
    }

    public ngAfterViewInit() {
        setTimeout(this.renderComponent);
    }

    private renderComponent() {
        const componentFactory = this._componentFactoryResolver.resolveComponentFactory(this.component);
        const viewContainerRef = this.componentHost.viewContainerRef;
        viewContainerRef.clear();
        const componentRef = viewContainerRef.createComponent(componentFactory);
        componentRef.instance.data = this.data;
    }
}

component-loader.module.ts

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

import { ComponentLoaderComponent } from './components';
import { ComponentHostDirective } from './directive';

@NgModule({
    imports: [],
    exports: [
        ComponentLoaderComponent
    ],
    declarations: [
        ComponentLoaderComponent,
        ComponentHostDirective
    ],
    providers: [],
})
export class ComponentLoaderModule { }

IComponentLoader.ts

export interface IComponentLoader {
    data: any;
}