How To Use jQuery With Angular (When You Absolutely Have To)

Learn how to use jQuery in your Angular app

Aditya Modi
Bits and Pieces

--

Not often, I start something on a cautious note. However, I will make an exception this time because when it comes to integrating jQuery in Angular, things get a little weird. Why I am writing this blog in the first place? Well, a few use cases need jQuery to go with Angular development. However, be aware that it goes against the nature of JavaScript frameworks like Angular to mess around with jQuery. Angular is responsible for rendering and manipulating the DOM and if you’re interfering with it using jQuery, you might get some unwanted results.

Tip: Using Bit you can quickly share and reuse your Angular components across your apps. It will help your team build new apps faster, and save you time. Learn more.

For a glimpse into Bit and some other Angular dev tools, check out this article:

Bit’s Visual Collection

Nonetheless, as I’ve said, there might be some cases where it is required, where it really helps, where it’s a little workaround, and where it is ok to use. These use cases are beyond the scope of this blog. I might cover them in a blog, later. Well for then, let me show you how to add jQuery to Angular. I will be using VS Code throughout the tutorial. You are free to use the code editor of your choice or you can download Visual Studio Code for Windows, Linux and macOS.

Adding jQuery to Angular

You need to create an Angular application using ng new command and then you need to ‘cd’ into that folder to install jQuery via NPM in the development environment. I am going to name the application angularmeetsjquery.

ng new angularmeetsjquerycd angularmeetsjquerynpm install jquery — save

Sounds great but jQuery purist would prefer a jQuery CDN over downloading it over npm. The CDN is another way to add jQuery to your Angular application although I prefer the ‘npm’ method. If you browse https://jquery.com/download/, you will find jQuery CDN and other CDNs by Google, Microsoft, CDNJS and jsDelivr. I would recommend you stick with the latest version of the official CDN as it supports Subresource Integrity (SRI).

To use the jQuery CDN, just reference the file in the script tag directly from the jQuery CDN domain. The code with Subresource Integrity attribute will look like this. As you see I am using jQuery 3.3.1 here.

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

You can copy the script from code.jquery.com. Then copy the script and paste it in the index.html file under <body>.

Making jQuery library ‘Global’

In jQuery module, jquery.min.js under ‘dis’ folder is not public. To make jQuery global, head over to .angular-cli.json file and pass reference to the jQuery file path.

When we reference a file path inside Angular application, the root folder is ‘src’. However, jQuery library is inside node_modules. We need to define the right path in .angular-cli.json file

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

To confirm this path, go to node_modules→jquery→dist→jquery.min.js. You will see the path, which means you have added jQuery library globally into this application. Don’t expect ‘localhost:4200’ page on your browser to reload itself since the file is outside ‘src’ folder. To make up for these new changes in the application, we have to rerun this application.

ng serve –open

Using jQuery in Angular application

To start using jQuery with Angular, head over to app components. I am going to present a simple demo of how Angular and jQuery can work in unison with a simple HTML button. You need to delete every line of code in app.component.html file and add a simple HTML button.

<button> Click me </button>

The localhost instance will auto reload to show the button.

We need to declare to jQuery symbol in app.component.ts file.

declare var $: any;

You need to implement ngOnInit Lifecycle Hook. You can import OnInit from Angular Core.

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

Then, you need to implement ngOnInit Lifecycle Hook.

export class AppComponent implements OnInit {

You can write jQuery code inside the method ngOnInit whether DOM is ready or not, as you would in traditional web application development. To test the button we created in app.component.html, add a button.click event inside ngOnInit method.

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

When you click the button, it will say ‘Wass Up’.

Verdict

Neither adding nor using jQuery with Angular is a tough bet. The methods are straightforward without any unnecessary complexities. However, as I’ve said at the beginning of this blog — no matter how tempting it may sound to use these two technologies together, it is often a bad idea because in real-world Angular applications you would be working on a far more complicated app than an HTML button connected to an event. My note to all Angular developers looking for the next opportunity to bring JQuery into their TypeScript code: do not do it unless you have to. Best of luck with your coding experiments around jQuery and Angular.

Build frontend apps with independent components and teams using Micro Frontends

Bit’s open-source tool helps 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

Micro-Frontends

Design System

Code-Sharing and reuse

Monorepo

--

--

Aditya Modi is the CEO of TOPS Infosolutions , a leading Web and Mobile App development company. Website: https://www.topsinfosolutions.com/