Angular: Using ComponentFactoryResolver for dynamic instantiation of the components, rendering inside SVG

Question

I have a component, which renders DOM, which is expected to be inside svg tag:

import { Component, Input          


        

Answer 1

Seems to be related to the old Angular issue: #10404, and also to the issue, mentioned by Vitalii: #20337

In #10404, DingWeizhe suggests the following work around:

Instead of this code:

    const componentRef = this.container.createComponent(componentFactory);

To use this:

    const groupElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
    const componentRef = componentFactory.create(injector, [], groupElement);
    this.container.insert(componentRef.hostView)

This change solves the problem without replacing with . An accepted answer, of course, also solves the problem, but I have some concern about performance penalty, which could cause such replacement.

Working stackblitz is here