How to use the jQuery library with the Angular framework (when you really need it)

We present you a translation of the article Aditya Modi, published on blog.bitsrc.io. The article is devoted to the use of the jQuery library in applications on Angular.



Infrequently, I take caution for something. However, this time caution does not hurt, because integrating jQuery into Angular is not so easy.
')
Why, actually, I wrote this article? Sometimes jQuery is really necessary for development on Angular, however such JavaScript frameworks are rarely associated with this library. Angular is responsible for rendering and managing the DOM, and by modifying it with jQuery, you risk getting a very unexpected result.

Tip : Using Bit , you can quickly share Angular components and reuse them in your applications. This will allow you and your team to spend less time creating new applications. Try it.



Anyway, in some situations interference with the framework is necessary, justified, it can be a real way out. These cases are not covered in my blog, but perhaps I will talk about them in my next articles. And now let me show you how to add the jQuery library to Angular. In this tutorial I will use VS Code. You can choose some other code editor or download Visual Studio Code for Windows, Linux and macOS .

Integrating jQuery into Angular

First of all, we need to create an application on Angular using the ng new command. Next, using the cd go to the folder where jQuery library will be installed via npm. Let's call the resulting application angularmeetsjquery .

 ng new angularmeetsjquery cd angularmeetsjquery npm install jquery — save 

It sounds great, but the jQuery purist will most likely select the download via the jQuery CDN rather than via npm. CDN is an alternative way to add the jQuery library to an application on Angular, but I prefer to use the npm method. If you look at https://jquery.com/download/ , you will find jQuery CDN libraries and other CDN networks from Google, Microsoft, CDNJS and jsDelivr. I would recommend the latest official version of the CDN, as it supports the SRI (Subresource Integrity) mechanism.

To use jQuery CDN, simply create a link to the file in the script tag directly from the jQuery CDN domain. The code with the Subresource Integrity function will look like this. (As you can see, I use the jQuery library version 3.3.1.)

 <script src=”https://code.jquery.com/jquery-3.3.1.js" integrity=”sha256–2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=” crossorigin=”anonymous”> </script> 

The script can be copied from the code.jquery.com resource. Then it needs to be inserted into the index.html file at the end of the < body > tag.

Making the jQuery global library

The jquery.min.js file located in the dis folder of the jQuery module is not public (correct folder name: dist. - Ed. ). To make the jQuery library global, go to the .angular-cli.json file .angular-cli.json link to the jQuery file in it.

When sending a link to a file path inside an Angular application, the root folder is src. However, the jQuery library is inside the node_modules directory. Therefore, you need to determine the correct path to the file. .angular-cli.json .

 ../node_modules/jquery/dist/jquery.min.js 

To make sure that the path is correct, go to the node_modules→jquery→dist→jquery.min.js . Here you can see the specified path, which means that the jQuery library was added globally for this application. Do not expect the localhost: 4200 page in your browser to reload itself, because the file is outside the src folder. To make changes appear in the application, you will have to restart it.

 ng serve –open 

We use jQuery in application on Angular

To start using the jQuery library with the Angular framework, you need to go to the application components. I will show you how smoothly these two technologies can work with a simple HTML button element. But first, delete all the lines of code in the app.component.html file and add the button HTML element.

 <button> Click me </button> 

The page will reload automatically, then a button will appear.



We need to set a symbol for jQuery in the app.component.ts file.

 declare var $: any; 

Then we insert the ngOnInit life cycle ngOnInit . To do this, you can import OnInit from Angular Core.

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

Add ngOnInit .

 export class AppComponent implements OnInit { 

Regardless of the readiness of the DOM, you can write jQuery code inside the ngOnInit method, as is done in standard web application development. To check the button created in app.component.html , add the button.click event to the button.click method.

 export class AppComponent implements OnInit { ngOnInit(){ $('button').click(function(){ alert('Wass up!'); }); } } 

If you click on the button, "Wass Up" appears.

Conclusion

Adding jQuery to Angular and using this bundle is a dubious idea.

Yes, at first glance, the method seems simple. However, as I said at the beginning of the article, no matter how tempting the joint use of these two technologies looked, the idea turns out to be often bad. In real Angular applications, you have to deal with much more complex things than the button -related HTML element associated with an event. My advice to anyone who works with Angular and is looking for an opportunity to embed jQuery into their TypeScript code: if not, don't do it. I wish you good experiments in jQuery and Angular!