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!

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