How do i use @types/jqueryui along with angular2 (typescript)

Question

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
    }
}

Jeba Prince · Accepted Answer · 2017-01-25 07:15:11Z

1

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.

answered Jan 25, 2017 at 7:15

Jeba Prince

1,6914 gold badges22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ShaMoh Over a year ago

getting error on draggable() function. Any update on this!?

ShaMoh Over a year ago

.draggable() is not a function. Do you have any plunker for this?

Jeba Prince Over a year ago

I am working in a live project, sorry didn't create a pluker. can you create a plunker with your usecase. so i can try to fix it? Looking at the error message looks like you did not import Jquery UI Make sure you have done this in your index.html <script src="code.jquery.com/jquery-2.2.4.min.js"></script> <script src="code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

Aluan Haddad Over a year ago

-1 for suggesting declare var $:any; instead of npm install @types/jquery, or one of a dozen others ways to acquire the most widely used and disbursed type declaration ever. If I got -1 again for suggesting using an AMD library as a global, I would.

Jeba Prince Over a year ago

Please feel free to share if you have a working example jquery + jqueryUI through AMD

|

STV · Accepted Answer · 2021-04-21 10:55:14Z

0

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.

answered Apr 21, 2021 at 10:55

STV

1

Collectives™ on Stack Overflow

How do i use @types/jqueryui along with angular2 (typescript)

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related