I want to use Directive as a public instruction. When the mouse clicks on the target element, the content of a component is displayed, and the mouse leaves and disappears.
currently I insert the component with ViewContainerRef when I click.
but the inserted component is side by side with the target element, while I want to insert the target element.
for example, the target element is < span appTxt > < span/ >, and the html of the inserted component is hi < span/ >
when I click. Will become < span appTxt > < span/ > hi < span/ >
but what wo wants is < span appTxt > hi < span/ > < span/ >
@ Directive ({
selector:"[appTxt]",
})
export class TxtCopyDirective {

constructor(private el: ElementRef, private renderer2: Renderer2, public viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {

}

@ HostListener ("click", [" $event"]) onclick (event: any) {

this.viewContainerRef.clear();
const componentFactory = this.componentFactoryResolver.resolveComponentFactory();
this.viewContainerRef.createComponent(componentFactory);

}

}