title: Svg using angular 2 and typescript not rendering with *ngFor
body: <p>I'm playing around with Angular2, using typescript and there is something that is not rendering as I hoped for, I don't know what I'm doing wrong. </p>
  
  <p>This code is working</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  @Component({
      selector: 'my-app',
      template: `
          &lt;svg viewBox="0 0 900 500" preserveAspectRatio="xMidYMid meet"&gt;
              &lt;svg:circle cx=50 cy=50 r=10 /&gt;
              &lt;svg:circle cx=71 cy=71 r=20 /&gt;
              &lt;svg:circle cx=106 cy=106 r=30 /&gt;
          &lt;/svg&gt;
      `
  })
  export class AppComponent {
  }
  </code></pre>
  
  <p>But when I'm trying to bind it on an object with *ngFor, it's not rendering...</p>
  
  <pre><code>@Component({
      selector: 'my-app',
      template: `
          &lt;svg viewBox="0 0 900 500" preserveAspectRatio="xMidYMid meet"&gt;
              &lt;svg:circle *ngFor="#circle of circles"
                    [attr.cx]="circle.x"
                    [attr.cy]="circle.y"
                    [attr.r]="circle.radius" /&gt;
          &lt;/svg&gt;
      `
  })
  export class AppComponent {
      circles = [
          {x: 50, y: 50, radius: 10},
          {x: 75, y: 75, radius: 20},
          {x: 115, y: 115, radius: 30}
      ];
  }
  </code></pre>
  
  <p>I'm trying to follow this tutorial (<a href="http://teropa.info/blog/2016/02/28/metabubbles-generative-art-with-angular-2.html#drawing-svg-circles" rel="nofollow noreferrer">http://teropa.info/blog/2016/02/28/metabubbles-generative-art-with-angular-2.html#drawing-svg-circles</a>) using typescript instead ...</p>
  
  <hr>
  
  <p>Seems to be a duplicate of <a href="https://stackoverflow.com/questions/31042624/angularjs-2-and-svg-ellipse-elements-not-rendered">AngularJS 2 and SVG &lt;ellipse&gt; elements not rendered</a></p>
  
  <p>Dom elements not generated for every iteration and properties(attributes) not generated...</p>
  
  <hr>
  
  <p>THIS IS NOW FIXED
  It works in Chrome, but not in IE 11.
  IE Console was not displaying the javascript errors and chrome console was. That how I managed to fix my issue trying to solve the javascript errors I had.</p>
  
  <p>I turned out to change the SystemJS config. Instead of using the following config as stated there <a href="https://angular.io/docs/ts/latest/quickstart.html#!#tsconfig" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/quickstart.html#!#tsconfig</a></p>
  
  <pre><code>System.config({
          packages: {        
            app: {
              format: 'register',
              defaultExtension: 'js'
            }
          }
        });
  </code></pre>
  
  <p>I used it :</p>
  
  <pre><code>System.config({
      transpiler: 'typescript',
      typescriptOptions: {
          emitDecoratorMetadata: true
      },
      map: {
          app: "./app"
      },
      packages: {
          app: {
              main: './main',
              defaultExtension: 'js'
          }
      }
  });
  </code></pre>
  
  <p>That's one part I'm not understanding very well, are those typescriptoptions are overrideing tsconfig.json file? I don't know yet... I don't know yet what is this mapping for and what are the packages, but at least I can go on with my learning</p>