CODEWITHSUNDEEP
jqueryangularpluginsjquery-plugins
oktykrk
oktykrk

Reputation: 111

How to use custom jquery plugins in angular 4

I am trying to use a jquery plugin named imgViewer2(https://github.com/waynegm/imgViewer2) in an Angular 4 project.

I installed npm packages and import jquery successfully and use it well. However when I try to use $(element).imgViewer2(); typescript says cannot find the function. I cannot import the plugin correctly.

What is the way to import and work this plugin?

Thank you very much.

compile errorwhen added code snippet

Solved

Most likely Avaid`s first suggestion,

Added jquery and its plugins refferences to the scripts array in angular-cli.json.

...
scripts: [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/imgViewer2/imgViewer2.min.js"
],
...

then just add the following line to your .ts file to use jQuery.

declare var $: JQuery;

now $ comes with functions and properties which added by the plugin. I do not know if there is a better way to do this but for know this is the painless one for me. Thanks.

Upvotes: 1

Views: 4358

Answers (2)

oktykrk
oktykrk

Reputation: 111

Solved

Added jquery and its plugins refferences to the scripts array in angular-cli.json.

...
scripts: [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/imgViewer2/imgViewer2.min.js"
],
...

then just add the following line to your .ts file to use jQuery.

declare var $: JQuery;

now $ comes with functions and properties which added by the plugin. I do not know if there is a better way to do this but for know this is the painless one for me. Thanks.

Upvotes: 0

Aviad P.
Aviad P.

Reputation: 32669

This is because the typings for jquery don't include any reference to imgViewer2, you can patch that in your component source by including this bit:

declare var $: JQuery;

declare global {
  interface JQuery {
    (selector: string): JQuery;
    imgViewer2(): JQuery;
  }
}

This will let typescript know that it is ok to call imgViewer2() as a method on an object of type JQuery (which I assume you already define since you've said you're using jquery in your app)

Add this code in the same file where you want to make the call to imgViewer2, in the global level.

EDIT

To complete this answer, in order to use jquery properly in the application add it to the scripts array inside the file .angular-cli.json thus:

scripts: [
  "../node_modules/jquery/dist/jquery.min.js"
]

Then use the above declaration in your component, here's a sample skeleton component:

import { Component } from '@angular/core';

declare var $: JQuery;

declare global {
  interface JQuery {
    (selector: string): JQuery;
    imgViewer2(): JQuery;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log($);
    $('div#myDiv').imgViewer2();
  }
}

EDIT 2

Alternatively, if you install the jquery typings npm i --save-dev @types/jquery then you can use a somewhat different strategy which is more strongly typed:

import { Component } from '@angular/core';
import 'jquery';

declare global {
  interface JQuery {
    imgViewer2(): JQuery;
  }
}

Note that you now have to import 'jquery', you dont have to declare var $..., and also that you don't have to repeat the call signature, as it is already defined for you in the typings library.

Upvotes: 1

Related Questions