Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get Angular2 to bind component in innerHTML

Tags:

angular

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?

like image 226
RHarris Avatar asked Apr 04 '16 17:04

RHarris


Video Answer


1 Answers

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.

like image 154
Günter Zöchbauer Avatar answered Sep 19 '22 20:09

Günter Zöchbauer