External libraries - converting jquery code provided by tutorials into Typescript

1

Hello all,

I’m finding that a lot of external libraries use jquery for their tutorials. I’d like to know how to use the proper Ttypescript syntax when using the methods of an external library in my Angular projects instead of simply installing jquery.

This slider library is the one I’m currently working on: https://refreshless.com/nouislider/slider-read-write/

I’m simply looking to display the value of slider in the view.

Any help on how to convert such syntax to Angular would be much appreciated.

2

Typescript is a superset of JavaScript, so there should be no difference in how you execute any code in your Angular project. Have you run into a particular issue?

3

Well it’s just that I know that interacting directly with the DOM actually limits the power of Angular and so using getElementFromId(), for example, is generally disliked.

The particular example is standard js but I’ve noticed when looking through libraries that jquery is very popular for the step-by-step tutorials and so it’d be nice to know how to convert them…

4

If you need a reference to an HTML element in Angular, there are a couple of ways to do it. You can get a reference to the component’s element from the constructor:

constructor(nameOfYourElement: ElementRef) {
    // do stuff
}

(source)

Alternatively, you can get a reference to any element in your component using ViewChild. There is no guarantee that either of these methods will work with that slider library, though. It’s not always as simple as directly translating from a jQuery function.

5

Apologies for the late reply.

Yes. it turned out to be a lot more difficult that I thought. I had a colleague with over 12 years experience puzzled for over an hour! In the end we discovered that there was a method within the library that made the process very easy. It amazes me how people will invest all those hours improving their libraries and then forget to update their literature!