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!

Solution 1

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

1. npm uninstall jquery jquery-ui
2. npm cache clean
3. npm install jquery jquery-ui

4. 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.

Solution 2

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"
],

Solution 3

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';

Solution 4

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.

View more solutions

Comments

[Georgi Arnaudov]

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]

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

[Georgi Arnaudov]

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...

[Georgi Arnaudov]

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

[f.b.]

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

[Neph]

Bump for the example

[Georgi Arnaudov]

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

[Chris]

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

[yogibimbi]

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

[Georgi Arnaudov]

yes guys, sorry, you have uninstall then install em again

[Ivan Carmenates García]

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()