In the following post I will describe how to integrate jQuery code with Angular.
That said, there are still a few acceptable uses cases for jQuery in Angular. One such example is jQuery plugins. In this post I will show you how to integrate the popular jquery-ui-draggable component with an Angular component. I will be applying the plugin to a component, which will let us drag the component around – inside the specified containment area.
While I recommend using this technique sparingly, Angular allows you to reach into the DOM and get access to the physical DOM element representing the component. This can be done by importing elementRef and injecting it into the constructor of the component.
The code below shows how to access the native element and wire it up to the draggable plugin.
As you can tell, I am applying the plugin in the ngOnInit function in the component.
Given the easy access to the DOM via elementRef, it's fairly easy to apply the plugin. However, as I recommended above – only access the DOM directly when you absolutely have to. Generally it's much better to update the DOM via models and declarative bindings.