Выберите SVG From ID в Angular 8

Question

Я динамически создал SVG в angular 8 и также получил его идентификатор, но теперь я хочу выбрать этот элемент из идентификатора, чтобы я мог динамически вносить изменения в SVG с помощью двухсторонней привязки.

Это код моего svg

 let rectangle = this.renderer.createElement('rect', 'svg');

    this.renderer.setAttribute(rectangle, 'x', '50');
    this.renderer.setAttribute(rectangle, 'y', '20');
    this.renderer.setAttribute(rectangle, 'rx', '20');
    this.renderer.setAttribute(rectangle, 'ry', '20');
    this.renderer.setAttribute(rectangle, 'width', '300');
    this.renderer.setAttribute(rectangle, 'height', '100');
    this.renderer.setAttribute(rectangle, 'style', 'fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)');

   this.renderer.addClass(rectangle,'resize-drag');

    this.renderer.appendChild(svg, rectangle);
    this.renderer.appendChild(this.designCanvas.nativeElement, svg);

  }

Это функция, в которой я передаю Id и отображаю SVG

displayProperties(properties: any) {

    let tbody = this.renderer.createElement('tbody');


    for (let i = 0; i < (properties.length); i += 2) {

      let tr = this.renderer.createElement('tr');

      let td = this.renderer.createElement('td');

      let tdText = this.renderer.createText(properties[i]);
      this.renderer.appendChild(td, tdText);


      let td1 = this.renderer.createElement('td');
      let  input = this.renderer.createElement('input');
      input.setAttribute('type','text');
      input.setAttribute('value', properties[i+1]);
      this.renderer.listen(input, 'change', (event) => {
        alert(properties[i] + " is "+ input.value);

      });

      this.renderer.appendChild(td1, input);
      this.renderer.appendChild(tr, td);
      this.renderer.appendChild(tr, td1);

      this.renderer.appendChild(tbody, tr);

    }


    this.renderer.appendChild(this.propertyTable.nativeElement, tbody);

  }

}

Это HTML КОД

<div class="container-fluid">
    <div class="row h-100">
        <div class="col-md-2 col-sm-12 text-center">
            <nav class="navbar bg-light">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-toggle="collapse" data-target="#svgtoggle">SVGs Library</a>
                        <ul id="svgtoggle" class="collapse navbar-nav">
                            <button class="nav-link btn btn-sm btn-outline-light text-dark" (click)="factory()">
                                Factory
                            </button>
                            <button class="nav-link btn btn-sm btn-outline-light text-dark" (click)="circle()">
                                Circle
                            </button>
                            <button class="nav-link btn btn-sm btn-outline-light text-dark" (click)="rectangle()">
                                Rectangle
                            </button>
                        </ul>
                        <a class="nav-link" href="#" data-toggle="collapse" data-target="#imagesToggle">Images
                            Library</a>
                        <ul id="imagesToggle" class="collapse navbar-nav">
                            <button class="nav-link btn btn-sm btn-outline-light text-dark">
                                Image 01
                            </button>
                            <button class="nav-link btn btn-sm btn-outline-light text-dark">
                                Image 02
                            </button>
                        </ul>

                    </li>
                </ul>
            </nav>
        </div>
        <div class="col-md-7 col-sm-12">

            <div class="resize-container" appDesignCanvas #designCanvas>
            </div>
        </div>
        <div class="col-md-3 col-sm-12 properties text-center">
            <button class="btn btn-small btn-danger text-center" (click)="reset()">Reset</button>
            <table class="table table-bordered" #propertyTable>
                <thead>
                    <th>Property</th>
                    <th>Value</th>
                </thead>

            </table>
        </div>
    </div>
</div>

До отображения все в порядке, и все атрибуты svg показывают хорошие, но после отображения я хочу проверить, является ли этот svg прямоугольником или круг или любую другую вещь, чтобы я мог изменить его значения.