INCLUDE TEMPLATE COMPONENT

include-template.component.ts

import { Component, Input, ViewContainerRef, OnInit, ComponentFactoryResolver, ViewChild } from "@angular/core";
import { LoggerService } from "../logger/logger.service";


@Component({
    selector: "include-template",
    template: "<div #includeContent></div>"
})

export class IncludeTemplateComponent implements OnInit {

    @Input("src")
    private templateUrl: string;

    @ViewChild("includeContent", { read: ViewContainerRef })
    protected contentTarget: ViewContainerRef;

    constructor(private componentFactoryResolver: ComponentFactoryResolver, private log: LoggerService) {}

    ngOnInit() {

        var dynamicComponent = this.createContentComponent(this.templateUrl);
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(dynamicComponent);
        this.contentTarget.createComponent(componentFactory);
    }

    private createContentComponent(templateUrl) {

        @Component({
            selector: "include-content",
            templateUrl: templateUrl
        })
        class IncludeContent {}
        return IncludeContent ;
    }
}