CODEWITHSUNDEEP
angularangular-directiveangular-components
D.B
D.B

Reputation: 4309

Render a nested component dynamically (created in the parent component) as a directive

Is it possible to render a nested component dynamically (created in the parent component) as a directive?

I know I can do something like this:

    <svg>
      <svg:g skick-back-drop-item />
    </svg>

where "skick-back-drop-item" is the following component:

    @Component({
    selector: '[skick-back-drop-item]',
    templateUrl: './back-drop-item.component.html',
    styleUrls: ['./back-drop-item.component.scss'],
    })
    export class BackDropItemComponent implements OnInit {
    ...

But I would like to see if I can create/instantiate that child component in the parent component and then inject it into any DOM element as a directive, the DOM elements would be something like this:

    <svg>
      <svg:g #svgContainer/>
    </svg>

I was creating the child component within the parent component dynamically using ComponentFactoryResolver and the ViewContainerRef from @angular/core

     performFrame() {

      ....
     //Add nested component
      const factory = this.resolver.resolveComponentFactory(
        BackDropItemComponent
      );
      const componentRef = this.container.createComponent(factory);
      componentRef.instance.imagePath = objectUrl;
    }
  }

But that approach creates the following wrapper div container:

    <div _nghost-hoc-c42="" skick-back-drop-item="" class="ng-star-inserted">

If the component is rendered as directive, only the content of the child component is rendered, which is what i need, because the child component contains SVG elements. If that wrapper is added, the SVG doesn't render because that weird div in the SVG tree.

Upvotes: 1

Views: 458

Answers (1)

gsa.interactive
gsa.interactive

Reputation: 565

You may remove the host or turn it into a valid svg --> like here: Remove the host HTML element selectors created by angular component

Upvotes: 1

Related Questions