How to import JQuery UI to angular 8 Project

Question

I'm working on angular app in which i want to implement draggable. There were questions about that in the past but nothing works for me. What I tried:

npm install jquery jquery-ui

and then adding following lines to angular.json

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/jquery-ui/jquery-ui.js"
]

and then importing it to my component like

declare let $: any;

or

import $ from 'jquery';

or

import $ from 'jquery';
import 'jqueryui';

but I'm still getting error:

TSLint: unused expression, expected an assignment or function call(no-unused-expression)

when placing this line in ngOnInit:

$('#draggable' as any).draggable;

As Artyom Krasnyuk said, jQuery isn't a great choice here. You have other options that are better suited to an Angular application. — isherwood
– isherwood, Commented Jan 13, 2020 at 16:44

isherwood · Accepted Answer · 2020-01-13 16:45:11Z

3

You should use it like (call a function):

$( "#draggable" ).draggable();

P.S: Don't use jQuery with Angular :) Consider using drag-and-drop from Angular CDK (developed by Angular team): https://material.angular.io/cdk/drag-drop/overview

edited Jan 13, 2020 at 16:45

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Jan 13, 2020 at 16:40

Artem Krasniuk

1,1877 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jan Kozub Over a year ago

Yes, I didn't know about Angualr material drag and drop. Works perfectly for me :). Thanks yall

Arh Hokagi Over a year ago

doesn't work for me, the cdk is laking the functionalities I need, for exemple select multiple list items with mouse jqueryui.com/selectable

Collectives™ on Stack Overflow

How to import JQuery UI to angular 8 Project

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related