title: How to add SVGelement with Angular TypeScript
body: <p>I have an Angular service which returns <a href="https://developer.mozilla.org/en-US/docs/Web/API/SVGElement" rel="nofollow noreferrer">SVGElements</a>, and I'd like to include them in a template, but I'm having trouble inserting them into the template. I'm sure this is a common thing to do but all my Googling and RTFM'ing, has failed me. </p>
  
  <p>Here's a minimal example (after calling <code>ng init</code>, of course):</p>
  
  <pre><code>[app.component.html]
  &lt;h1&gt;
    {{title}}
    &lt;div [innerHTML]="circle"&gt;&lt;/div&gt;
    &lt;div [innerHTML]=circle.outerHTML&gt;&lt;/div&gt;
    &lt;div &gt;{{circle}}&lt;/div&gt;
    &lt;div &gt;{{circle.outerHTML}}&lt;/div&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>, </p>
  
  <pre><code>[app.componoent.ts]
  import { Component } from '@angular/core';
  
  // create an SVGElement
  var svg_string  = '&lt;svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"&gt; &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt; &lt;/svg&gt;'
  var parser = new DOMParser();
  var circle_elt = parser.parseFromString(svg_string, "image/svg+xml").childNodes[0];
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app works!';
    circle = circle_elt;
  }
  </code></pre>
  
  <p>And what I get is a web page that displays the text: </p>
  
  <pre><code>app works!
  [object SVGSVGElement]
  [object SVGSVGElement]
  &lt;svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"&gt; &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/&gt; &lt;/svg&gt;
  </code></pre>
  
  <p>and in the console, there are messages stating:</p>
  
  <blockquote>
    <p>"WARNING: sanitizing HTML stripped some content (see <a href="http://g.co/ng/security#xss" rel="nofollow noreferrer">http://g.co/ng/security#xss</a>)."</p>
  </blockquote>