How To Use JQuery In Angular CLI Project

In this article, I will explain to you about including jQuery in Angular application. We can achieve it by following very simple steps.

Install jQuery with npm command

At first install jQuery with below command:

npm install jquery — save

Now, we will add the url of its files in angular.json file at the root of the Angular CLI project. Find the script tag and include the path to jQuery as follows:

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

If you have already included other libraries then add jquery library url at the top to avoid any unwanted errors.

After including jQuery in the Angular CLI application, start the app with npm start or ng serve. We will start to use it in our component file, for that we need to import it as normal module we do in our application. So for that we need to add below line of code at the top part of the file:

import * from 'jquery';

Have a look at the below code that uses jQuery to animate div on click, especially in second line below, we are importing everything as $ from jQuery.

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 {
title = 'Including jQuery in angular!';

public ngOnInit()
{
$(document).ready(function(){
$("btn").click(function(){
  // write your jquery code here....
});
});
}
}

Conclusion

So in this article, We learn to include jQuery in Angular CLI project.

That’s all for now. Thank you for reading and I hope this article be very helpful to understand how to use jQuery in angular CLI project.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

This article is originally posted over jsonworld