render custom component

snippet.ts

@Component({
    selector: 'inner-component',
    template: '<div (click)="onClick()">{{someValue}}</div>'
})
export class InputComponent {
    @Input() someValue: string;
    @Output() onClick = new EventEmitter<any>();
}

@NgModule({
    exports: [InnerComponent],
    declarations: [InnerComponent]
})
export class InnerModule {}


@Component({
    selector: 'wrapper-component',
    template: '<span #customComponent></span>'
})
export class WrapperComponent {
    @ViewChild('customComponent', {read: ViewContainerRef}) body: ViewContainerRef;
    customComponentRef: ComponentRef<Component>;

    constructor(@Inject(Compiler) private compiler: Compiler) {
    }

    renderComponent() {
        this.compiler
            .compileModuleAndAllComponentsAsync(InnerModule)
            .then(factory => {
                return factory.componentFactories
                    .find(x => x.componentType === InnerComponent);
            })
            .then((component) => {
                this.customComponentRef = this.body.createComponent(component, 0);

                // binding inputs
                const {instance} = this.customComponentRef;
                _.extend(instance, {someValue: 'text'});

                // binding outputs
                instance['onClick'].subscribe(() => {
                    console.log(`clicked`);
                });

            });
    }
}