How To Install And Use JQuery In Angular Projects

How To Install And Use JQuery In Angular Projects

Introduction

JQuery is a full-featured javascript library that is used for HTML manipulation, error handling, making AJAX calls, adding animations, and traversal of DOM in an easy and simple way. It is also famous for "less code and more work or action". It makes writing the javascript code easier and much less line of codes. We have several methods in JQuery that makes our tasks easy to accomplish. We can use JQuery in Angular projects whenever our job needs a lot of DOM manipulation. In this post, we will see how to add JQuery in our Angular project.

Installing JQuery In Angular

We will create an Angular application using the Angular CLI and then we will add JQuery to it. Use the following command to make a new Angular project.
ng new angularwithjquery 
cd angularwithjquery
Now we will see how to install JQuery using the following command. Adding --save flag to save it in package.json file also. 
npm install jquery --save
Now we will add JQuery in our angular.json file or angular-cli.json file depending upon the Angular version we are using in our application. This step will make our JQuery global. We will find the scripts[] property and add the path for JQuery as shown below:
"scripts" : [ "../node_modules/jquery/dist/jquery.min.js" ]
Now we will have to run our angular application again using ng serve command. 

Using JQuery In Angular

Now we will go to our Angular component where we want to use JQuery and import it in the below way:
import * as $ from 'jquery'; or
declare var $: any;
Now we will add JQuery to our component.ts file and add a click event using JQuery on a button inside the ngOnInit() method. Whenever the user will click the button we should get an alert. We will explicitly check whether the DOM is ready or not before adding a click event to the button.

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit { ngOnInit()
{
$(document).ready(function(){
$("button").click(function(){
alert("Button clicked");
});
});
}
}

Use jquery in Angular with typescript jquery @types

Whenever we add a third-party library in Angular, it is advisable to use type definition files with typescript to know the code error during the compilation phase itself. If we will not include these type definition package of JQuery then we will get JQuery errors during run time as the typescript compiler will not identify the errors in our JQuery code. 

We will install the JQuery type definition package in Angular using the following command. If we using the type definition package we will not add the JQuery path in the angular.json file. Now we will see the error as our buggy code will not compile after adding the type definition node module package for JQuery. We can import the JQuery as shown above in our component class and we are good to go. 
npm install @types/jquery --save

Comments