Angular library for drawing lines between objects

Question

I am looking for a package to include in my angular project like this: https://anseki.github.io/leader-line/

I've read that is quite a hassle to import vanilla javascript libraries into a typescript project so i was wondering if somebody knows an equivelant of this library as a package for angular. I've searched online but so far no luck.

You should have no problem importing vanilla javascript libs into typescript. All javascript is valid typescript. — skolldev, Feb 27 '19 at 14:49
https://stackoverflow.com/questions/54402225/how-to-use-javascript-library-in-angular-component i am reading this now. I've imported the folder into my assets folder and imported it in the angular.json in the scripts array as "src/assets/scripts/anseki-leader-line-2cd19cd/leader-line.min.js" But how can i use it now? tried some stuff but i think i declare it wrong — sirJ, Feb 27 '19 at 15:04
[d3](https://github.com/d3/d3/wiki/Gallery) is another library worth taking a look at too. — JGFMK, Feb 27 '19 at 15:07
looks interesting! it's in my bookmarks now! For now i can see ;/*! LeaderLine v1.0.5 (c) anseki https://anseki.github.io/leader-line/ */ in my scripts.js so it is included. How do i declare it so i can use it in my typescript file? So far no luck — sirJ, Feb 27 '19 at 15:10
Have you tried installing the npm package and including it as you usually would? — skolldev, Feb 27 '19 at 15:14
i've added it manually, stupid me. Makes more sense to do it via the cli. Will try that — sirJ, Feb 27 '19 at 15:15
Allright i've installed it via npm, i am a little bit lost now on how to include it in my typescript can't get it work. So far i've got this import { LeaderLine } from 'node_modules/leader-line/leader-line.min.js'; Not sure if it is the right way and how to work with it now — sirJ, Feb 27 '19 at 15:37

score 9 · Answer 1 · edited May 06 '20 at 20:34

9

Step 1: Install LeaderLine

npm i leader-line --save

Step 2: Include it in angular.json

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

Step 3: Import leader-line, declare LeaderLine and inject document

import { Component, Inject, OnInit } from '@angular/core';
import {DOCUMENT} from "@angular/common";
import 'leader-line';
declare let LeaderLine: any;

@Component({
  selector: 'my-app',
  template: '<div id="d1">div 1</div><div style="height:500px"><!-- JUST SOME SPACE --></div><div id="d2"> Connect me</div>',
})
export class AppComponent implements OnInit {

  constructor(@Inject(DOCUMENT) private document){
  }

  ngOnInit() {
    new LeaderLine(
      this.document.getElementById('d1'),
      this.document.getElementById('d2')
    );
  }
}

edited May 06 '20 at 20:34

user229044

232,980
40
330
338

answered Apr 11 '19 at 16:13

Tomislav Turalija

91
2

hello, I followed above-mentioned steps, However, i m getting TicketAssociatedeviceEditComponent.html:1 ERROR ReferenceError: LeaderLine is not defined Please let me know what went wrong. I'll give you a up vote – siddharth shah Jul 23 '19 at 09:12
1

Its hard to know it without example. There is several possible problems that I can think of: - installation of library failed -import is not correct (in angular.js or in ts file, check paths) - declaration is not on correct position (shout be outside class body) My bet is that path to library is not correct. – Tomislav Turalija Jul 24 '19 at 12:07
@TomislavTuralija. I just followed the steps. But am unable reproduce the line. Can you please help me out. – Prashanth Damam Nov 13 '19 at 06:26
@PrashanthDamam can you be more precise? Do you have github project to share? – Tomislav Turalija Nov 15 '19 at 14:05
2

[Error demonstration](https://stackblitz.com/edit/angular-ivy-ms8h65?devtoolsheight=33&file=src/app/app.component.ts) – Kaustubh Badrike Oct 17 '20 at 11:22
if you have issues still, run npm install. – AtLeastTheresToast Dec 08 '21 at 04:09
if the DOM elements are getting added dynamically then LeaderLine always fails as document.getElementById always returns null, haven't been able to make it work in such situation – vk-code Jan 31 '22 at 19:43

score 1 · Answer 2 · edited Feb 09 '20 at 10:06

1

Please restart ,i.e: run ng serve --open, again and everything will run fine :)

edited Feb 09 '20 at 10:06

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Feb 09 '20 at 07:16

arthur_loyal

11
1

Angular library for drawing lines between objects

2 Answers2