How to inject component tag using innerHTML directive?

Asked Aug 03 '16 at 09:19

Active Aug 03 '16 at 09:30

Viewed 544 times

I have some collection of objects, in which each object has the following property:

{
...
component: '<example-component></example-component>'
}

And in my *ngFor directive, I have the following:

<div *ngFor="let item of items">
   <div [innerHTML]="item.component">
   </div>
</div>

However, this seems not to inject the component. Am I doing something wrong here?

Btw, If I change the component to SVG (which is basically what I want to achive), it doesn't render as well.

edited Aug 03 '16 at 09:30

asked Aug 03 '16 at 09:19

uksz

1

Possible dup of http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 – yurzui Aug 03 '16 at 09:20
HTML passed as `[innerHtml]` or any other dynamic way is not processed by Angular2 in any way (except some sanitization). You need to use `ViewContainerRef.createComponent()` if you want to dynamically instantiate and add components. – Günter Zöchbauer Aug 03 '16 at 09:33
@GünterZöchbauer, is it possible to use `ViewContainerRef.createComponent()` in *ngFor? – uksz Aug 03 '16 at 09:34
1

http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 does this – Günter Zöchbauer Aug 03 '16 at 09:35
Works great @GünterZöchbauer. Danke Schon! – uksz Aug 03 '16 at 09:43
1

Gerne :) . . . . . – Günter Zöchbauer Aug 03 '16 at 09:44

0 Answers0