0

I have the following example:

<div #containerRef class="container">
  
    <app-component-1>
        <div id="el1"></div>
        </app-component-1> 
  
    <app-component-2>
       <div id="el2"><div>
       </app-component-2>
  
    <app-line-component>
        <svg style="position: absolute">
           <line
           [attr.x1]="linePositionX1"
           [attr.y1]="linePositionY1"
           [attr.x2]="linePositionX2"
           [attr.y2]="linePositionY2"
            style="stroke: rgb(255, 0, 0); stroke-width: 2;"/>
        </svg>
    </app-line-component>

</div>

I want to drew a SVG (line) inside the app-line-component between elements el1 and el2, witch both of them created dynamically and located inside two separate components in the main container.

My current TS code inside app-line-component:

public createLine(): void {      
          const elOneHtml: HTMLElement | null = document.getElementById(el1);
          const elTwoHtml: HTMLElement | null = document.getElementById(el1);
        
          const parentDomRect: DOMRect = containerRef.nativeElement.getBoundingClientRect();
          const elOnerect: DOMRect = elOneHtml.getBoundingClientRect();
          const elTwoRect: DOMRect = elTwoHtml.getBoundingClientRect();
}

The issue is that I'm not sure what I should do next, how exactly can I find the coordinates that I need for the SVG (e.g x2, y2, width)?

yurzui
  • 205,937
  • 32
  • 433
  • 399
Anna
  • 131
  • 2
  • 11
  • Have you seen this question? https://stackoverflow.com/questions/19382872/how-to-connect-html-divs-with-lines – yurzui Aug 30 '20 at 12:13
  • @yurzui thank you for the comment, it's similar question, but I'm creating the SVG path dynamically and I need to calculate the position according to dynamic values – Anna Aug 30 '20 at 12:17
  • 1
    It depends on how you're positioning your items. Here's a simple example https://ng-run.com/edit/73ILJDGkYF4Fr5gjOv4V?open=app%2Fline%2Fline.component.ts – yurzui Aug 30 '20 at 12:46

0 Answers0