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 can use Dynamic Component Loader Using Dynamic Component loader, you can change your template during runtime

Userful Links

Angular-dynamic component loader

create components in Angular dynamically.

Answer 2

You don't need to remove the selector, this can bu 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.

Answer 3

hard to tell what you are trying to do. to create a component, just do this:

ng g component header

and in the html:

<app-header></app-header>