Using leader-line to Draw Lines Between Two Angular Components
Tags: angular, javascript, programming, webdev
Published: 2021-02-17 16:39:02

Preston Lamb | ng-conf | Nov 2020

### **tldr;**
Certain applications require a visual cue that two items are related. There are many ways to accomplish this effect, but one simple way is to use the leader-line NPM package. The package allows you to draw a line between two elements by just passing the elements to a constructor function. The library then takes over, allowing you to pass options for customization as well. In this article, I’ll show you how to use the library in your Angular application to draw lines between two Angular elements.

### **Setup**
To get started, you need to first install the npm package:

```
$ npm install leader-line
```

After that, you need to include the JavaScript file from the package in the `scripts` array for the project in the `angular.json` file:

```
...
"scripts": ["node_modules/leader-line/leader-line.min.js"],
...
```

This will load the script for your project so the library can be used in the application.

### **Drawing a Line Between Two Elements**
To draw a line between two elements with the `leader-line` package, two HTML elements should be passed in to the `LeaderLine` constructor. The starting element is the first argument, the ending element is the second argument. A third optional argument can be passed in which customizes the look of the line. The package makes it very easy to draw the line.

The only hard part about this is making sure we get access to the Angular element in the correct way. The “Angular way” of accessing DOM elements does not include using the `document` like you would in normal JavaScript applications:

```
const startingElement = document.querySelector('#starting-element');
const endingElement = document.querySelector('#ending-element');

const line = new LeaderLine(startingElement, endingElement);
```

That’s how we would access the DOM in a normal JavaScript application, but Angular discourages directly accessing the DOM in this manner. To access the elements in Angular, we should use `ElementRef`s and `ViewChild` or `ViewChildren`. You can read more about these topics [here](https://www.digitalocean.com/community/tutorials/angular-viewchild-access-component) or [here](https://blog.angular-university.io/angular-viewchild/) for example. We won't go in depth here on the topic, but in a nutshell `ViewChild` gives you access to DOM elements in a component's class file. Here's an example of the class file and the component template:

```
// app.component.ts
declare var LeaderLine: any;

export class AppComponent() implements AfterViewInit {
  @ViewChild('startingElement', { read: ElementRef }) startingElement: ElementRef;
  @ViewChild('endingElement', { read: ElementRef }) endingElement: ElementRef;

  ngAfterViewInit() {
    const line = new LeaderLine(startingElement.nativeElement, endingElement.nativeElement);
  }
}
```

And the HTML file:

```
<app-box #startingElement>Starting Element</app-box>
<app-box #endingElement>Ending Element</app-box>
```

The reason for creating the line in the `ngAfterViewInit` method is because the elements may not be available in the template when the component first initializes, but will be available in the `ngAfterViewInit` method. In that method, we can create the line, and it will be drawn on the screen.

### **Removing the Lines**
Once the line is drawn on the screen with LeaderLine, it will stay until manually removed. If the component layout changes, the line may need to be re-drawn. You can remove the line as long as you’ve kept access to the line in a local variable by calling the `remove` method on the line:

```
line.remove();
```

### **Line Options**
LeaderLine provides a lot of options to customize the output of the line. I won’t go over them all here because the documentation is very good, but you can change the color of the line, the style of the line, where exactly it starts and ends in relation to the respective HTML elements, path labels, and much more. [Check out the documentation here](https://github.com/anseki/leader-line#options) for all the options that you can pass to the constructor. You can also call the `setOptions` method and pass in an object to set the options for the line.

### **Conclusion**
The LeaderLine package has been really helpful on my most recent project at work. We are building a workflow builder (do this, then this, etc) and lines need to be drawn from one element to the next to visually display the workflow. I was worried about how best to draw those lines on the screen, but this package was easy to install and easy to work with. In a matter of a few minutes I was able to be up and running, where rolling my own solution would have taken several days.

## **ng-conf: The Musical is coming**
ng-conf: The Musical is a two-day conference from the ng-conf folks coming on April 22nd & 23rd, 2021. Check it out at [ng-conf.org](https://www.2021.ng-conf.org/)

---

_Originally published at [https://www.prestonlamb.com](https://www.prestonlamb.com/blog/using-leader-line-to-draw-lines-between-two-angular-components) on November 30, 2020._