title: Dynamically updating SVG in Angular
body: <p>I am trying to programatically add paths to an SVG element in an HTML in an Angular application. The problem is that the paths are being added to the DOM but are not rendering in the browser. Despite a day of searching and experimenting, I can't find what the issue is. I've reproduced the problem in a small app. Hopefully someone can spot what I'm doing wrong.</p>
  
  <p>Angular template for the component:</p>
  
  <pre><code>&lt;div style="text-align:center"&gt;
    Click the button to add a path to the svg
    &lt;button (click)="onClickMe()"&gt;Click me!&lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;svg #svg
         xmlns="http://www.w3.org/2000/svg"
         width="200mm"
         height="200mm"
         viewBox="0 0 200 200"&gt;
      &lt;path
        style="fill:#000000;fill-opacity:1;stroke:#000000;"
        d="M 60,147 h 40 v 30 H 85 V 157 H 75 v 20 H 60 Z"
        id="path1"&gt;
      &lt;/path&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the Typescript:</p>
  
  <pre><code>import {Component, ElementRef, Renderer2, ViewChild} from '@angular/core'
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    @ViewChild('svg') svg: ElementRef
  
    constructor(private renderer: Renderer2) {
    }
  
    onClickMe() {
      const path = this.renderer.createElement("path", 'http://www.w3.org/2000/svg')
      this.renderer.setAttribute(path, "d", 'M60,150 H50 V 50 Z')
      this.renderer.setAttribute(path, "style", "fill:#F00;")
  
      this.renderer.appendChild(this.svg.nativeElement, path)
    }
  }
  </code></pre>
  
  <p>When you run the app, the hardcoded path in the template is displayed correctly. However when you click on the button, a path is inserted as child of the SVG element but the path isn't rendering in the browser.</p>