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?

score 4 · Accepted Answer · edited May 23 '17 at 12:10

4

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.

edited May 23 '17 at 12:10

Community

1
1

answered Apr 04 '16 at 17:01

Günter Zöchbauer

623,577
216
2,003
1,567

1

I think the DynamicComponentLoader is exactly what I'm looking for. Thanks so much. – RHarris Apr 04 '16 at 17:44
1

But if it's not a component you're trying to load how does it work? If it's only a simple html string? – Chrillewoodz Apr 05 '16 at 09:30
Then wrap it in a component. If this isn't possible http://stackoverflow.com/questions/36008476/how-to-realize-website-with-hundreds-of-pages-in-angular2 might be helpful – Günter Zöchbauer Apr 05 '16 at 09:31
1

@GünterZöchbauer I've been trying to implement the DynamicComponentLoader per your suggestion but ran into an issue where one of the loaded components requires a service. I've posted about it here http://stackoverflow.com/questions/36490509/how-to-inject-a-service-into-a-dynamic-component-with-angular2. Would you have any suggestions? – RHarris Apr 08 '16 at 18:43
1

DynamicComponentLoader link is dead. – SomeCallMeTim Oct 15 '16 at 03:41
Please, any working example with the last release? Thank you. – Eusthace Nov 28 '16 at 06:29
1

I guess you need http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 – Günter Zöchbauer Nov 28 '16 at 06:52
I added a bit to my answer that is probably what you run into. – Günter Zöchbauer Nov 28 '16 at 06:53
Thank you Günter, I will check :) – Eusthace Nov 28 '16 at 19:24

How to get Angular2 to bind component in innerHTML

1 Answers1

Linked

Related