Angular 5 — using jquery plugins

Photo by rawpixel.com

many features in our web app is a lot easy to implement using an existing jquery plugin. here is a step-by-step guide to use one in your angular 5 web app.

note — assuming you are using angular-cli

1. install jquery and save to project dependencies

npm install jquery --save

2. install typings for jquery, used by typescript. save to dev dependencies

npm install @types/jquery --save-dev

3. install the plugin. you can also download the plugin file independently and include in a vendors folder in your project, if the plugin is not available on npm

4. include jquery in tsconfig types array

...
"types": [
  "jquery"
]
...

5. include jquery and the plugin script in .angular-cli.json as global scripts

...
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "<path-to-plugin-script-file>"
]
...

6. add an interface JQuery in your local typings declaration file typings.d.ts and declare plugin function

interface JQuery {
  <your-plugin-name>(options?: any): any;
}

7. and that’s all. the plugin is now available globally in your angular 5 application, to be called on a jquery object. you can call it in a component or a directive.

$(<element>).<your-plugin-name>(<options>);