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.
