angular8 - Angular 8x - Directive dynamic parent not occupies the parent dimensions

Question

I am appending the component with dynamic element i create. it appending correctly. but the dynamic element is not resizing to component dimensions. as a general it's not aware of it's child. any one help me to fix this issue?

here in the image, the red bordered element one is I am creating. but the width is not extended with component underneath.

source code on browser:

my directive:

import { DOCUMENT } from "@angular/common";
import {
  Directive,
  ElementRef,
  EventEmitter,
  HostListener,
  Inject,
  Input,
  OnInit,
  Renderer2,
  ViewContainerRef,
  ViewChild,
} from "@angular/core";
import { Subscription } from "rxjs";
import { ComponentLoaderService } from "../services/component-loader.service";
export interface LoaderConfig {
  componentName: string;
  action: string;
  data: any;
}
@Directive({
  selector: "[ibo--ComponentLoader]",
})
export class ComponentLoaderDirective implements OnInit {
  @Input() loaderConfig: LoaderConfig;
  childElement;
  elementId = "host-wrap";
  rectParent;

  fileExport = new EventEmitter();
  actionMenu = new EventEmitter();

  emitterSub: Subscription;

  @ViewChild("container", { static: false })
  viewContainerRef: ViewContainerRef;

  private _loaderActive = false;

  constructor(
    private componentLoader: ComponentLoaderService,
    private elementRef: ElementRef,
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document,
    private vr: ViewContainerRef
  ) {}

  ngOnInit() {
    this.childElement = document.createElement("div");
    this.childElement.setAttribute("class", "tooltip");
    this.childElement.setAttribute("id", "tooltip");

    this.childElement.style.display = "inline-block";
    this.childElement.style.position = "absolute";
    this.childElement.style.border = "1px solid red";
  }

  @HostListener("mouseenter") mouseover() {
    if (this.loaderConfig.action === "mouseenter") {
      this.embedComponent();
    } else {
      return;
    }
  }

  @HostListener("mouseleave") mouseleave() {
    if (this.loaderConfig.action === "mouseenter") {
      this.removeComponent();
    } else return;
  }

  @HostListener("click") onClick() {
    this.removeElement();
    if (this.loaderConfig.action === "click") {
      this.renderer.appendChild(window.document.body, this.childElement);
      this.toggleLoader();
    } else {
      return;
    }
  }

  removeElement() {
    const childrens = document.querySelectorAll(".tooltip");
    console.log("removeElement", childrens, childrens.length);
    if (childrens.length) {
      childrens.forEach((el) => el.remove());
    }
  }

  embedComponent() {
    const componentRef = this.componentLoader.loadComponent(
      this.loaderConfig.componentName
    );

    if (componentRef) {
      this.vr.clear();
      const ref = this.vr.createComponent(componentRef);
      ref.instance["data"] = this.loaderConfig.data;
      this.subscribetoComponentEvents(ref);
      this.renderer.appendChild(this.childElement, ref.location.nativeElement);
    }

  }
}

Thanks in advance.

Answer 1

等待大神答复