Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Installation
2.1.
Example
3.
Frequently Asked Questions
4.
Key Takeaways
Last Updated: Mar 27, 2024

How to use jQuery in Angular

Author Rubleen Kaur
0 upvote
gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

In this article, we will be covering how to use JQuery in Angular. There are a few cases where we need to integrate jQuery in Angular for using a few features in our applications. Now we have seen that Javascript frameworks like AngularJs mess around jQuery. For briefing the functionalities of these frameworks, AngularJs is responsible for rendering and manipulating the DOM, and if we interfere with jQuery, we might get unwanted results. 

For using the Angular application, we use the ng new command, and then we need to ‘cd’ for getting into the folder install jQuery via npm in the development environment. 

Let’s consider a few orders you can follow for installation.

Installation

There are two ways you can install jQuery in AngularJs. 

  • npm method
  • jQuery CDN


→ npm method: We can install jQuery using the NPM command. Before installing jQuery we have to create a new angular application. We can use this command for creating a new application,

ng new codingninjas

 


 

We have created a new application codingninjas, the above command will take a few seconds to get executed, but will deliver a new application with all the desired files. Now we have created a new application but we are still not in the path of the application. For accessing the application and performing further installation for jQuery we will use the command given below:

cd codingninjas
npm install jquery --save

 

We have now successfully installed jQuery in our application. You can now easily use Jquery in the Angular application.
 

→ jQuery CDN: Using the website for jQuery, you can download the dependencies, you can download the CDN and use it. To use jQuery CDN you will need to have a script tag in your files, version 3.4.1 is used here,the code you can use is,

<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-2z0P7MLoyxByUtvAk/xjkmindefS4auh4Pfzbm7y6g0="
crossorigin="anonymous">
</script>

Example

In the given example we have used jQuery in Angular and created an application displaying a button with the animation. 

HTML Code -

<!DOCTYPE html>
<html>

<head>
<title>Jquery in Angular</title>
</head>

<body>
<h1 style="color:blue">
CodingNinjas
</h1>
<h2>Jquery in Angular</h2>
<button>Start Animation </button>
<div style="border:1px solid;
border-radius:3px;
color:white;
background:red;
height:105px;
width:260px;
position:relative;">
jQuery in Angular
</div>
</body>

</html>

 

Angular.js code -

import { Component, OnInit} from '@angular/core';
importasfrom 'jquery'
export class AppComponent implements OnInit {
ngOnInit(){
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'}, "slow");
div.animate({fontSize:'5em'}, "slow");
});
});
}


 

 

OUTPUT

Refer to know about:   jquery ajax

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

  1. Why is jQuery not used in angular?
    We are not recommended to use jQuery in Angular because they overlap with DOM manipulation, causing an immense amount of confusion.
     
  2. How can we install jQuery in angularJS?
    There are two ways you can install jQuery in AngularJs:
    → Npm method
    → jQuery CDN
     
  3. Why is AngularJS called Angular?
    AngularJS is considered to be the first version of Angular. But it is not right to call it Angular since this term is more often used to denote Angular 2.

Key Takeaways

Hey everyone, so let’s brief out the article. 

  • This article has explained how you can integrate Jquery in Angular. 
  • We have discussed the introduction and the role of both AngularJs and Jquery, as AngularJS is responsible for rendering and manipulating the DOM. If we interfere with jQuery, we might get unwanted results.
  • Further, we have seen the installation process and a descriptive example for the implementation of jquery in Angular.


Isn’t Web Development engaging? Building new websites and using amazing animations and different APIs, don’t be scared if you cannot grasp the hold of this vast development. We have the perfect web development course for you to make you stand out from your fellow developers. 

Check out more related articles:

NPX vs NPM

Happy Learning Ninjas!

Previous article
How to Reload/Re-render the Entire Page Using AngularJS?
Next article
Important AngularJs Questions
Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass