title: How to create an SVG component dynamically in Angular2?
body: <p>I am creating a web application which uses SVG.
  I have created components consist of SVG element, and they are put into a root <code>svg</code> element.
  They have attribute selector, because SVG/XML document tree is strict so I cannot use element selector.
  And they have a template starts with <code>svg:g</code> tag:</p>
  
  <pre><code>@Component({
    selector:'[foo]',
    template: '&lt;svg:g&gt;...&lt;/svg:g&gt;',
  })
  </code></pre>
  
  <p>In the application, I want to create a component when a user press a button,
  and simultaneously start dragging it.
  I thought it can be achieved by creating a component dynamically using <a href="https://angular.io/docs/ts/latest/api/core/index/ComponentResolver-class.html" rel="noreferrer">ComponentResolver</a>:</p>
  
  <pre><code>  @ViewChild('dynamicContentPlaceHolder', {read: ViewContainerRef})
    protected dynamicComponentTarget: ViewContainerRef
  
    private componentResolver: ComponentResolver
  
    onMouseDown() {
      this.componentResolver
        .resolveComponent(FooComponent)
        .then((factory) =&gt; {
          const dynamicComponent = this.dynamicComponentTarget.createComponent(factory, 0)
          const component: FooComponent = dynamicComponent.instance
          const element = dynamicComponent.location.nativeElement
          // add event listener to start dragging `element`.
        })
    }
  </code></pre>
  
  <p>Component is created when <code>onMouseDown()</code> called, but its DOM element is <code>div</code>, so it is illegal element in svg document and cannot be displayed.</p>
  
  <p>I have tried with <code>selector='svg:g[foo]'</code>, then <code>g</code> element is created, but its namespace is not for SVG (<code>http://www.w3.org/2000/svg</code>), but normal HTML namespace (<code>http://www.w3.org/1999/xhtml</code>) and its class is <code>HTMLUnknownElement</code> > <code>g</code>.</p>
  
  <p>I also tried with <code>selector='svg:svg[foo]'</code>, then <code>svg:svg</code> element is created and it is displayed. But <code>svg:svg</code> cannot move with <code>transform</code> attribute so this doesn't work well for my application.</p>
  
  <p>How can I dynamically create <code>svg:g</code> element for attribute selector component?</p>
  
  <p>I am using Angular2: 2.0.0-rc4.</p>