Angular how to generate dynamically component without the selector tag

Question

I am struggling to generate components dynamically without their component tag. Basically I have a main component with a svg picture in it.

I'm trying to write a component witch is going to generate rectangles inside that tag svg. I tried following the angular tutorial for dynamic components, but here is what I get when I generate the component:

Unfortunately, due to the ng-component, nothing is displayed.

here is the component template :

@Component({
  selector: '',
  template: ``<svg:rect width="1000px" height="1000px" fill="white">``,
  styleUrls: ['./shape-tool.component.scss']
})

here is my main component html :

<div class="main">
    <svg #svg version="1.1" baseProfile="full" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <ng-template svgDynamic></ng-template>
    </svg>
</div>

I only want the rectangle tag to get in the svg tag when the user clicks the main component.

Answer 1

You don't need to remove the selector, this can be fixed using CSS only, just set shape-tool as display: contents,

    shape-tool {
        display: contents;
    }

As stated on display: contents documentation, this causes to appear as if the component were direct children of the element's parent. That way there's no need to remove it.