How to use JQuery in Angular?

Image by Momentmal from Pixabay

Using Angular in JQuery is not the best practice but if you want to, or have to, I’ll show how to do it in a few simple steps

Installation

First, install the JQuery library.

npm install jquery --save

We need to install JQuery definition file also, to get IntelliSense support

npm install @types/jquery --save-dev

Import into Application

As we know JQuery is one big javascript object. We cannot import it, like we commonly do inside Angular applications, for example like this:

import { Input} from "@angular/core"

Because of that, firstly, we have to load JQuery inside Angular application. Open angular.json file, and in scripts, array add the following value

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

By that way, JQuery is loaded exactly as if you had added it in a <script> tag inside index.html

Next, we have to import the library into the Angular application, otherwise, the compiler will think, that we are not using it and will not include it in a bundle file

Open main.ts file and insert

import "jquery";

Now JQuery is fully loaded inside our application.

You can type JQuery anywhere in your app, and you will see IntelliSense right away (remember not $, you should type “JQuery”)

How to properly use JQuery?

One thing to remember is that you have to wait until the view is loaded and then use JQuery, otherwise the element will not be in HTML yet

ngOnInit(){
//not here
}
ngAfterViewInit(){
//use here
JQuery("#myElement").hide();
}

The proper way to use it is to get a reference of an element, using the ViewChild decorator and use this element as Selector. I can show you by example

Here we grab an element from view using the ViewChild decorator and pass it to JQuery to hide it

But if for some reason, it is not an option, you could use it, using standard CSS selectors

Why not use JQuery in Angular?

DOM changes should be applied using Angular itself, not some external library, otherwise, you may lose syncing from the application state to view.

For example, let’s modify our example

We are fetching our H1 element using the @ViewChildren decorator and subscribing to changes, so if an element will be removed/added, we will get a notification. Also after 1 second we fill remove this element using JQuery.

If we run this application, we will see that even the element is removed from DOM, we still have this element inside our Component and the change event has not been fired. So that’s the syncing issue. we have something inside our model but not in the view. That’s because Angular doesn’t know that something has changed inside the View. If we use the *ngIf directive, instead of JQuery the event will be fired

So this is quite an annoying issue.

Besides that, you can achieve everything (I mean everything) only with Angular itself, there is no need for JQuery at all.

Is it okay to use an external library like JQuery in Angular?

Of course, it is okay if you have reasons for that. I hate Angular animations library, it’s API is just a nightmare for me. So when I need some complex animations, I use gsap (best animation library on the planet) all the time, and I’m fine with my conscience (you have to guide source, not vice versa ;)).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store