Dynamically transform html to component in angular4/angular2

Question

I've got an external module which takes an html string, converts it to html and adds it to the dom. This looks like this:

dialogDefinition.addContents({
    title: 'Upload',
    id: 'upload',
    label: 'Upload',
    elements: [{
        type: 'html',
        html: '<media-upload></media-upload>'
    }]
});

What I want is that the media-upload -Component gets rendered by angular so that I can reuse my existing component logic.

How can I get angular to initialize the dynamically added components, when the html content doesn't come from a template?

In angular1 there is the $compile-function for such situations, but I don't find the equivalent or an other working solution for angular4/angular2.

Thanks in advance for any help.

Answer 1

Angular.io has a really good doc on how to load components dynamically:

https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html