title: How can I prevent Angular2 from wrapping a component in a DOM element?
body: <p>I would like to manipulate an <code>&lt;SVG&gt;</code> element within an Angular2 project.  I would like to create various svg elements within the main <code>&lt;SVG&gt;</code> tag at runtime.  I have read the tutorial on dynamic component creation on angular.io (<a href="https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html</a>), and I have it basically working.  But it seems like Angular wraps each component in its own DOM element, named after either the component's selector, or a simple DIV with a class/id named after the selector.  So when I insert an element, I get output that looks like the following:</p>
  
  <pre><code>&lt;svg id="logo" style="border: 3px solid black" viewBox="0 0 600 400" width="600" height="400"&gt;
      &lt;svgcirclecomponent&gt;
          &lt;circle r="100" cx="10" cy="10"&gt;&lt;/circle&gt;
      &lt;/svgcirclecomponent&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>What I would LIKE to have is the following:</p>
  
  <pre><code>&lt;svg id="logo" style="border: 3px solid black" viewBox="0 0 600 400" width="600" height="400"&gt;
      &lt;circle r="100" cx="10" cy="10"&gt;&lt;/circle&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>However I cannot simply hard-code the <code>&lt;circle&gt;</code> in the parent SVG component, since I need to create and manipulate multiple types of inner components.  Is this possible in Angular2?</p>
  
  <p>Here is my code.  If I've left something out let me know and I'll add it.</p>
  
  <h1>svg.component.ts</h1>
  
  <pre><code>import { Component, Input, Output, ViewEncapsulation, ViewChild, ComponentFactoryResolver } from '@angular/core';
  import {MdButton} from '@angular/material';
  import {SvgChildItem} from './svgChildComponents/svgChildItem';
  import {SvgChildDirective} from './svgChildComponents/svgChild.directive';
  import {SvgChildComponent} from './svgChildComponents/svgChild.component';
  import {SvgCircleComponent} from './svgChildComponents/svgCircle.component';
  
  @Component({
    selector: 'svgCanvasComponent',
    template: `
      &lt;button md-button (click)="addNewComponent()"&gt;Add Circly&lt;/button&gt;&lt;br /&gt;
      &lt;svg width="800" height="800" viewBox="0 0 800 800"&gt;
          &lt;template svg-child-host&gt;&lt;/template&gt;
      &lt;/svg&gt;
    `
  })
  export class SvgCanvasComponent  {
      @ViewChild(SvgChildDirective) svgChildHost: SvgChildDirective;
  
      constructor(private _componentFactoryResolver: ComponentFactoryResolver) {}
  
      addNewComponent() {
          console.log('adding circly');
          let svgChildItem = new SvgChildItem(SvgCircleComponent, {"x":10, "y":20});
          let cmpFact = this._componentFactoryResolver.resolveComponentFactory(svgChildItem.component);
          let viewContainerRef = this.svgChildHost.viewContainerRef;
          let componentRef = viewContainerRef.createComponent(cmpFact);
          (&lt;SvgChildComponent&gt;componentRef.instance).data = svgChildItem.data;
      }
  }
  </code></pre>
  
  <h1>SvgCircle.component.ts</h1>
  
  <pre><code>import {Component, Input, ViewEncapsulation} from '@angular/core';
  import {NnpUtilModule} from '../../nnpUtil.module';
  
  import {SvgChildComponent} from './svgChild.component';
  
  @Component({
      selector: "svgCircleComponent"
      ,template: `
          &lt;svg:circle [attr.cx]="x" [attr.cy]="y" r="100"&gt;
      `
      ,encapsulation: ViewEncapsulation.None
  })
  export class SvgCircleComponent implements SvgChildComponent {
      @Input() x: number;
      @Input() y: number;
  
      @Input() data: any;  //  from SvgChildComponent interface
  
      constructor() {
          //[this.x, this.y] = [Math.random(), Math.random()];
          [this.x, this.y] = [10, 10];
          //console.log(NnpUtilModule.getFive());  //  TODO: load this from a service so everyone can share the util?
          console.log('constructing SvgCircleComponent');
      }
  }
  </code></pre>
  
  <h1>SvgChild.component.ts</h1>
  
  <pre><code>export interface SvgChildComponent {
      //  common interface to standardize the api for passing data to the SVG components
      data: any;
  }
  </code></pre>
  
  <h1>SvgChildItem.ts</h1>
  
  <pre><code>import {Type} from '@angular/core';
  
  export class SvgChildItem {
      constructor(public component: Type&lt;any&gt;, public data: any) {}
  }
  </code></pre>
  
  <h1>svgChild.directive.ts</h1>
  
  <pre><code>import { Directive, ViewContainerRef } from '@angular/core';
  
  @Directive({
    selector: '[svg-child-host]',
  })
  export class SvgChildDirective {
    constructor(public viewContainerRef: ViewContainerRef) { }
  }
  </code></pre>