How to Inject Angular Components in the DOM programmatically instead of placeholders

I store formatted text in my database and want to render it in my Angular Application. However, the idea is to have placeholders in the text that can be replaced by Angular Components.

For simplicity, assume I store the content of my html-templates, load them dynamically and want to make sure <app-my-custom-component/> still is a MyCustomComponent.

Using ViewContainerRef, I can parse the text (or DOM it produces) and create such Components at that ContainerRef. However, It seems Angular does not allow me to simply move them around, using JS like "Element.replaceWith()" or "Node.insertBefore()", nor does it seem like I can create "dynamic" ViewContainerRefs where the placeholders are.

I thought of creating a WrapperComponent for all the stuff that shouldn't be a specific component, such that everything is (re)created in the ViewContainerRef using Angular methods. While that should technically work, since there might be nested structures (think a HTML table), I'd have to create Wrappers for each node recursively, and I don't think that's viable.

So I wonder if there is a proper way to do something like this in Angular.

Continue reading...