How to import jquery-ui in Angular 4

Viewed 9679

I want to use the toggle function of jquery-ui in my angular app. I've installed jquery-ui with npm:

npm install jquery jquery-ui

As suggested in this answer, I added the path to angular-cli.json file. But I get this error:

Error: ENOENT: no such file or directory, open 'C:\Users\Frank95\Angular projects\Portfolio-Slider\node_modules\jquery-ui\jquery-ui.js'

I searched in the jquery-ui folder and there is no jquery-ui.js file. What should I put in the path?

3 Answers
install jquery - npm install jquery
install jquery ui - npm install jquery-ui-dist --save 

put this file in angular.json in Scripts

"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/jquery-ui-dist/jquery-ui.js"

and put this file in angular.json in styles

"./node_modules/jquery-ui-dist/jquery-ui.css"

import like declare let $: any; in ts file and write jquery and jquery ui code on ngOnInit event done

If you have included jQuery file in your project then just add one line in your component file var $ as any; and then you can use jquery function like hide,show,toggle on your DOM elements via ViewChild.

Related