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 itse

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

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

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

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

Answer 5

### IMPORTANT ###

WRONG

import * as $ from 'jquery';
import 'jquery-ui-dist/jquery-ui';

Because compiler is problem.
CORRECT

declare var require: any
var $ = require('jquery');
require('jquery-ui-dist/jquery-ui');

OR

declare var require: any
var $ = require('jquery');
import 'jquery-ui-dist/jquery-ui';