Angular inject component in innerHtml

Question

I'm setting HTML returned from the API in my Angular component:

<div [innerHTML]="content"></div>

content in this example is something like this:

<table>
    <tr>
        <td>[audioPlayer:file.mp3]</td>
    </tr>
</table>

Now I would like to inject the actual component inside the table cell.

If I make a certain container, I can create the component with createComponent:

audioPlayerComponentRef: ComponentRef<AudioPlayerComponent>;
@ViewChild('placeholder', { read: ViewContainerRef }) container;

const factory: ComponentFactory<AudioPlayerComponent> = 
this.componentFactoryResolver.resolveComponentFactory(AudioPlayerComponent);
this.audioPlayerComponentRef = this.container.createComponent(factory);

Then I can inject it into a container in the template:

<div #placeholder></div>

However, going back to my original goal, I can't use such a container, as the component needs to be injected into a specific position into an innerHtml block.

I've been brainstorming all day, but I can't see any way to achieve this.

I’m afraid you have to rethink your approach. You cannot have a functional angular component inside innerHtml.. — MikeOne
– MikeOne, Commented Jul 14, 2020 at 16:15

Mvin · Accepted Answer · 2020-08-26 17:33:11Z

1

Generally speaking, this is contrary to the way Angular works. [innerHTML] is not parsed for any Angular functionality. No component selectors or even a ViewContainerRef can be found there. Rather, even remotely suspicious HTML, CSS and JS is removed as a security measure as Angular only trusts its own templates.

So InnerHTML is a no-go. But I was in the same boat myself and have written a library to solve this exact problem. With it, you can freely load dynamic components into strings without compromising security. If you're still stuck on this, you might wanna have a look at it.

answered Aug 26, 2020 at 17:33

Mvin

4335 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tomasdev Over a year ago

[innerHTML] can have Angular functionality through use of createCustomElement

Collectives™ on Stack Overflow

Angular inject component in innerHtml

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related