How to get Angular2 to bind component in innerHTML

Question

I want to create a component myApp that will embed HTML from a property on the controller in its template. However, some of that HTML may include other component selectors.

import {InfoComponent} from ...
@Component({
    selector: 'myApp',
    template: `<div [innerHTML]='hData'></div>
               <myInfo></myInfo>`,
    directives: [InfoComponent]
})
export class AppComponent {
   hData = "<myInfo></myInfo>";
}

@Component({
   selector: 'myInfo',
   template: "<b>This is a test</b>"
})
export class InfoComponent {
}

In this example, I would expect to see This is a test displayed twice. However, it doesn't appear that the Angular2 engine picks up on the fact that the selector of the Component has been injected so the template never gets generated for the <myInfo></myInfo> selector that is add via the binding.

You can see a demo here.

Is there a way to get Angular2 to parse the selector in the same way it does with the selector that is added explicitly in the template?

Answer 1

There is no way to make [innerHtml]="..." instantiate Angular components or directives or establish any bindings.

The closest for this requirement is DynamicComponentLoader. (DynamicComponentLoader was removed a while ago) ViewContainerRef.createComponent()

See Angular 2 dynamic tabs with user-click chosen components for an example

Since RC.5 Angular2 sanitizes styles and HTML added through binding. See In RC.1 some styles can't be added using binding syntax for more details.