How to use jQuery UI with Angular 2

Question

Because I want to incorporate Drag and Drop functionality in my app, I decided to import jQuery UI to my Angular 2 project.

First I started by importing jQuery itself by doing the following:

import { ElementRef } from '@angular/core';
declare var jQuery:any;

ngOnInit() {
    jQuery(this._elRef.nativeElement).find('ul.tabs').tabs();
}

This works perfectly for initializing stuff. But when I try do to the .draggable() function I get the following error:

jQuery(...).draggable is not a function

How can I make this work? I read a lot of approaches but all of them used system-js which in the current version on Angular-cli I do not use. I know that using jQuery in Angular 2 app is not really the best approach, but I just need a grid in which users can Drop draggable widgets.

If you have any suggestions, that will be perfect! Thanks!

Are you loading the JQuery UI library somewhere? Do you have a script tag in your index.html file for example? — Pádraig Galvin
– Pádraig Galvin, Commented Jan 25, 2017 at 21:13
Yes I am loading it in the index.html right after the jQuery lib — Georgi Arnaudov
– Georgi Arnaudov, Commented Jan 25, 2017 at 23:58

Georgi Arnaudov · Accepted Answer · 2017-09-13 06:17:48Z

10

I managed to make it work by doing the following steps:

npm uninstall jquery jquery-ui
npm cache clean
npm install jquery jquery-ui
In angular-cli.json I added my jquery and jquery-ui paths in the scripts object. Here is what they look:

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

After I completed these steps, it worked like a charm. Hope that helps someone who had problems with it.

edited Sep 13, 2017 at 6:17

answered Jan 27, 2017 at 17:01

Georgi Arnaudov

4271 gold badge3 silver badges15 bronze badges

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

6 Comments

ciao0cacao0 Over a year ago

Could you give an example what the paths look like in step 3? — Thanks :)

Neph Over a year ago

Bump for the example

Georgi Arnaudov Over a year ago

@f.b.Sorry for the delay, I edited my answer and added how my scrips array in angular-cli.json looks like.

Chris Over a year ago

It seems odd that this would work.... If you uninstall jquery and jquery-ui, how are they still in your node_modules folder?

yogibimbi Over a year ago

maybe there is an npm install missing, or the uninstall was actually meant to be an install?

|

Ivan Carmenates García · Accepted Answer · 2018-04-12 16:07:52Z

5

npm install jquery jquery-ui --save

npm install @types/jquery --save-dev

import * as $ from 'jquery';
import 'jquery-ui/ui/widgets/selectable.js';

usage:

ngAfterViewInit(): void {
    ($('.selectable') as any).selectable({..});
}

you may also want to import the stylesheet on style.scss if using sass

@import '../node_modules/jquery-ui/themes/base/selectable.css';

or

in .angular-cli.json

"styles": [
      "../node_modules/jquery-ui/themes/base/selectable.css",
      "./styles.scss"
],

edited Apr 12, 2018 at 16:07

answered Apr 12, 2018 at 15:34

Ivan Carmenates García

3715 silver badges5 bronze badges

Comments

vidalsasoon · Accepted Answer · 2017-01-27 17:15:34Z

I use angular2 with jqueryUI. You need to import jquery and jqueryUI

//SystemJS

System.config({
    defaultJSExtensions: true,
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    map: {
        'app':  'app',

        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
        // other libraries
        'rxjs': 'npm:rxjs',

        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js',
        jqueryui: 'npm:jqueryui/jquery-ui.min.js',

        material: 'npm:material-design-lite/dist/material.min.js'
    },
    packages: {
        app: { main: 'main', format: 'register', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    },
});

///////////////////////////////

//Angular2 Component

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

I do not use System JS, actually. I use Angular-cli which is using Webpack now.

chrispy · Accepted Answer · 2017-01-25 21:33:15Z

1

It's possible the element you're selecting isn't available yet, so the selector is failing to find the element.

You should probably call the .draggable() in the ngAfterViewInit lifecycle hook (which is like ngOnInit) to make sure the DOM element is present before attaching.

answered Jan 25, 2017 at 21:33

chrispy

3,6321 gold badge14 silver badges19 bronze badges

4 Comments

Georgi Arnaudov Over a year ago

I actually tried your suggestion but with no success. I even put a setTimeout function for 5 secs in the ngAfterViewInit hook and there is no error until the element tries to init. Any other suggestions?

chrispy Over a year ago

@GeorgiArnaudov what happens if you log the jQuery(element)? Does it print anything?

Georgi Arnaudov Over a year ago

I logged it and returned an object with my item in it, so jQuery is working. But what else should I do in order to make jQuery UI work also? I have included the script right after jQuery, then installed the typings for both jQuery and jQuery UI. I also tried to install it through npm and when I checked into the node_modules folder I found out that there is no build of it. Then when I import 'jquery-ui' it gives me another error: $.each is not a function. So I really don't know why is this happening...

Ivan Carmenates García Over a year ago

Regards, there is a way to support widget or whatever with angular2+ just install the packages as already mentioned here and then import the specific js of the widget like this import 'jquery-ui/ui/widgets/selectable.js'; then use a casting as any in the jquery selector like this ($('.selectable') as any).selectable()

Collectives™ on Stack Overflow

How to use jQuery UI with Angular 2

4 Answers 4

6 Comments

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related