How to use jQuery in Angular ?

Last Updated : 12 Jul, 2025

In this tutorial, we will learn how we can use jQuery with Angular. There are two ways in which we can use jQuery with Angular as discussed below:

Table of Content

By installing jQuery using the npm command

You can install the jQuery in your current project folder using the below commands

npm install --save jquery

Now add the below HTML code to your app.component.html file.

HTML

<!DOCTYPE html> <html> <head> <title>Jquery in Angular</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h2>Jquery in Angular</h2> <button>click me </button> <p id="result"></p> </body> </html>

After adding the HTML code add the below Angular code to app.component.ts file to use jQuery in Angular.

JavaScript

import { Component, OnInit } from '@angular/core'; import $ from 'jquery'; @Component({  selector: 'my-app',  templateUrl: './app.component.html',  styleUrls: [ './app.component.css' ] }) export class AppComponent implements OnInit {  ngOnInit()  {  $('button').click(function () {  $('#result').html('<b>jQuery used in angular by installation.</b>');  });  } }

Output:

jQueryAngularGIF

Using jQuery CDN to use it

You can use the jQuery in Angular by simply adding the jQuery CDN in head tag of the index.html file.

CDN Link:

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" 
 integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" 
 crossorigin="anonymous" referrerpolicy="no-referrer">
</script>

Add the below HTML code to you index.html file.

html

<!DOCTYPE html> <html> <head> <title>Jquery in Angular</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h2>Jquery in Angular</h2> <button>click me</button> <p id="result"></p> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity= "sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <my-app>loading</my-app> </body> </html>

Now, addbelow code to your app.component.ts file to see the use of jQuery.

html

import { Component, OnInit } from '@angular/core'; // import $ from 'jquery'; declare var $: any; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { ngOnInit() { $('button').click(function () { $('#result').html('<b>jQuery used in angular by installation.</b>'); }); } }

Output:

jQueryAngularGIF

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.