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?
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
There is no one file you can include like that, if you have imported through Angular CLI. You would need to add files separately like this:
This is my Angular CLI file where I am just using only a few of them.
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/metismenu/dist/metisMenu.min.js",
"../node_modules/jquery-slimscroll/jquery.slimscroll.min.js",
"../node_modules/jquery-ui/ui/widget.js",
"../node_modules/jquery-ui/ui/widgets/datepicker.js",
"../node_modules/jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.js"
],
BTW, .toggle is a function of jquery, jquery-ui just uses that.
Alternatively, you can simply link the CDN resource in the head of your index.html file in src directory. Although not recommended this method works well with Angular.
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
If you want to choose which modules to keep you can visit http://jqueryui.com/download/ and select them one by one.
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.
