Динамическое обновление SVG в Angular

Я пытаюсь программно добавить пути к элементу SVG в HTML в приложении Angular. Проблема в том, что пути добавляются в DOM, но не отображаются в браузере. Несмотря на день поиска и экспериментов, я не могу найти, в чем проблема. Я воспроизвел проблему в небольшом приложении. Надеюсь, кто-нибудь поймет, что я делаю не так.

Угловой шаблон для компонента:

<div style = "text-align:center">
  Click the button to add a path to the svg
  <button (click) = "onClickMe()">Click me!</button>
</div>
<div>
  <svg #svg
       xmlns = "http://www.w3.org/2000/svg"
       width = "200mm"
       height = "200mm"
       viewBox = "0 0 200 200">
    <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">
    </path>
  </svg>
</div>

И Машинопись:

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)
  }
}

При запуске приложения жестко заданный путь в шаблоне отображается правильно. Однако, когда вы нажимаете кнопку, путь вставляется как дочерний элемент SVG, но путь не отображается в браузере.