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

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