CODEWITHSUNDEEP
htmlangularsvg
Denis Itskovich
Denis Itskovich

Reputation: 4543

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

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

import { Component, Input } from '@angular/core';

@Component({
  selector: 'g[hello]',
  template: `<svg:text x="50%" y="50%" text-anchor="middle">Hello, {{name}}</svg:text>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

When I instantiate it statically, everything works fine (the text is visible on the page):

<svg>
  <svg:g hello name="Static component"></svg:g>
</svg>

The following DOM is generated:

<svg _ngcontent-iej-c129="">
  <g _ngcontent-iej-c129="" hello="" name="Static component" _nghost-iej-c130="" ng-reflect-name="Static component">
    <text _ngcontent-iej-c130="" text-anchor="middle" x="50%" y="50%">
      Hello, Static component
    </text>
  </g>
</svg>

The problem starts when I try to instantiate the component dynamically, using ComponentFactoryResolver:

<svg>
  <ng-container #container></ng-container>
</svg>

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
import { HelloComponent } from './hello.component'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  @ViewChild('container', {read: ViewContainerRef, static: true}) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {

  }

  ngOnInit() {
    // Instantiating HelloComponent dynamically
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(HelloComponent)
    const componentRef = this.container.createComponent(componentFactory);
    componentRef.instance.name = 'Dynamic component'
  }
}

The produced DOM seems looking OK, but for some reason, the text is not visible on the page:

<svg _ngcontent-iej-c129="">
  <!---->
  <g hello="" _nghost-iej-c130="">
    <text _ngcontent-iej-c130="" text-anchor="middle" x="50%" y="50%">
      Hello, Dynamic component
    </text>
  </g>
</svg>

Please see Reproduction at stackblitz

Upvotes: 9

Views: 2720

Answers (3)

JeB
JeB

Reputation: 12143

I assume there are two questions here:

  1. How to make it work?
  2. Why is that happening?

The answer to the first question is using svg instead of g for grouping elements.
In your concrete example it would mean changing the selector:

@Component({
  selector: 'svg[hello]',
  template: `<svg:text x="50%" y="50%" text-anchor="middle">Hello, {{name}}</svg:text>`,
  styles: [`h1 { font-family: Lato; }`]
})

And app.component.html:

<svg>
  <svg hello name="Static component"></svg>
</svg>

Now let's get to the second question. Why is this happening?
Your selector doesn't contain svg namespace. In order to render it correctly the selector should be svg:g[hello].
But that is impossible due to an old issue that's been there since Angular 5.
More details here and here.

As mentioned in this comment the main issue here is that Angular selector cannot contain namespace for creating element.
Selector svg:g[hello] will be parsed to g[hello], as a result Angular will use document.createElement instead of document.createElementNS to create new element.

Why using svg[hello] works?
Because if we use selector svg[hello] then it is parsed to <svg child> and for this tag Angular is providing namespace implicitly: 

'svg': new HtmlTagDefinition({implicitNamespacePrefix: 'svg'}),

Upvotes: 11

Denis Itskovich
Denis Itskovich

Reputation: 4543

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 <g> with <svg>. 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

Upvotes: 4

Vitalii Bobrov
Vitalii Bobrov

Reputation: 191

Seems that it is related to the open issue, see

https://github.com/angular/angular/issues/20337

Upvotes: 2

Related Questions