I would like to use jqueryui in my angular application
I can import jquery like this
import * as $ from 'jquery';
But how do i import '@types/jqueryui' from https://www.npmjs.com/package/@types/jqueryui
Since jqueryui is an interface, i am not able to import it
How i am using jquery
export class JqueryUIIntegrationComponent implements AfterViewInit{
@ViewChild('jqueryElement') el:ElementRef;
constructor() {
}
ngAfterViewInit() {
console.log(this);
$(this.el.nativeElement).slideUp(4000).slideDown(5000); // jquery function
$(this.el.nativeElement).draggable(); //Since jqueryui is not imported this will not work
}
}
Work Around: (Not the solution through @types/jqueryui )
You can use @types/jqueryui for typing/autocomplete support.
Root HTML:
Import jquery and jquery UI js files
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
Component:
In your component declare
declare var $:any;
use it in class like this
export class JqueryUIIntegrationComponent implements AfterViewInit {
@ViewChild('jqueryElement') el:ElementRef;
constructor() {
}
ngAfterViewInit() {
console.log(this);
$(this.el.nativeElement).draggable(); //same old style
}
}
Note: Any native support through @types/jqueryui (right way) is welcomed. please let me know if you find any solution.
Add on top of your *.ts file reference to d.ts
types file
///<reference path="../node_modules/@types/jqueryui/index.d.ts"/>
It did the trick for me.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.