17.10.2018 Views

Angular

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Chapter 58: Using third party libraries like<br />

jQuery in <strong>Angular</strong> 2<br />

When building applications using <strong>Angular</strong> 2.x there are times when it's required to use any third party libraries like<br />

jQuery, Google Analytics, Chat Integration JavaScript APIs and etc.<br />

Section 58.1: Configuration using angular-cli<br />

NPM<br />

If external library like jQuery is installed using NPM<br />

npm install --save jquery<br />

Add script path into your angular-cli.json<br />

"scripts": [<br />

"../node_modules/jquery/dist/jquery.js"<br />

]<br />

Assets Folder<br />

You can also save the library file in your assets/js directory and include the same in angular-cli.json<br />

"scripts": [<br />

"assets/js/jquery.js"<br />

]<br />

Note<br />

Save your main library jquery and their dependencies like jquery-cycle-plugin into the assets directory and add<br />

both of them into angular-cli.json, make sure the order is maintained for the dependencies.<br />

Section 58.2: Using jQuery in <strong>Angular</strong> 2.x components<br />

To use jquery in your <strong>Angular</strong> 2.x components, declare a global variable on the top<br />

If using $ for jQuery<br />

declare var $: any;<br />

If using jQuery for jQuery<br />

declare var jQuery: any<br />

This will allow using $ or jQuery into your <strong>Angular</strong> 2.x component.<br />

GoalKicker.com – <strong>Angular</strong> 2 Notes for Professionals 186

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!