title: How to Connect Two divs with lines in Angular
body: <h1>* Project Description</h1>
  <p>I am creating a responsive tournament Brackets tree web Page.</p>
  <h1>* Problem</h1>
  <p>My Problem is that I want to connect each Bracket &quot;each bracket is a div of its own&quot; to the next one with a decorated line, in general I want two connect two divs with a line that I can decorate.</p>
  <h3>- Example</h3>
  <p>Example1</p>
  <p><img src="https://i.ibb.co/mvV2k9R/example-1.png" alt="Example1" /></p>
  <p>Example2</p>
  <p><img src="https://i.ibb.co/2SWfytt/example-2.png" alt="Example2" /></p>
  <h1>* what I tried</h1>
  <p>I tried using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D" rel="nofollow noreferrer" title="This is the CanvasRenderingContext2D Link">CanvasRenderingContext2D</a> but I didn't have much luck in it, or at least didn't know how to fully utilize it</p>
  <h1>* What I want/ What's expected</h1>
  <p>I want to be able to connect the two brackets/divs with a line that can be bent and moved &quot;by the developer not the user&quot; to design it.</p>
  <ul>
  <li>p.s: This only needs to be shown on screens larger than &quot;xs&quot; so mobile devices is not a concern.</li>
  </ul>
  <h1>* My Code</h1>
  <p><a href="https://stackblitz.com/edit/angular-tounment-brackets?file=app/app.component.html" rel="nofollow noreferrer" title="This is the stackblitz Link">Stackblitz Project</a></p>
  <h2>- Used Libraries and versions</h2>
  <ul>
  <li>Angular V:5.1</li>
  <li>Flex-Layout &quot;angular&quot; V: 2.00 beta 12</li>
  <li>Angular Material V: 5.01</li>
  </ul>