How to use jQuery in Angular ?

Before starting with using jQuery in angular, we need to install it on our system. Now basically there are two general methods to install jQuery:
Note: Before starting with this tutorial, you show know the software used here is Microsoft visual studio code with NodeJs and typescript already installed to work with angular.

  1. Using NPM method:
    Now to install jQuery Using NPM method, we need to create a new angular application by running the command at the VS Code Terminal.

     ng new angular1

    Here angular1 is the name of the application it will take a few seconds, but it will create the angular application with all the required files.

    now we “cd” into the application folder to install the jquery. We execute the following command at the VS Code terminal:



    cd angular1
    npm install jquery --save
    


    After this, your angular app is ready to be used with jquery.

  2. Using jQuery CDN:
    While browsing https://jquery.com/download/, you can easily locate the jQuery CDN and download it.
    It is always recommended sticking with the latest version of the official CDN since it supports Subresource Integrity (SRI). Now to use the jQuery CDN, you need to reference the file in the script tag directly from the jQuery CDN domain. The code with Subresource Integrity attribute will be like this. jQuery 3.4.1 is used here.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script
    integrity=”sha256–2z0P7MLoyxByUtvAk/xjkmindefS4auh4Pfzbm7y6g0=”
    crossorigin=”anonymous”>
    </script>

    chevron_right

    
    

    The above code will be included in the head tag of the HTML file(app.component.html) of the angular app.

    After installing jQuery we need to make it global. In the jQuery module, jquery.min.js under ‘dis’ folder is not public. To make jQuery global, we need to do the following:
    The step involves browsing to the file “angular-cli.json” which is located at the root of your Angular CLI project folder and find the script: []property, and include the path to jQuery folder as given

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

    Now To confirm this path, browse to node_modules -> jquery -> dist -> jquery.min.js.

    You will see the path, which means you have added jQuery library globally into this application. In order for these changes to make a smooth transition in the application, we have to rerun this application using serve.

     ng serve -open 

    Now to use jQuery all that is left is to import it in whatever component you want to use jquery.

    import * from jquery

Note: All the example programs are executed using microsoft visual studio code.

  • Example: Now to follow up with this tutorial we need to include the Html Code in app.component.html
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>
    </body>
      
    </html>

    chevron_right

    
    

  • We need to include the below code in app.component.ts to make the button perform an action.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import * as $ from 'jquery'
    import {
        Component, OnInit
    }
    from‘ @angular / core’;
    export class AppComponent implements OnInit {
        ngOnInit() {
            $(‘button’).click(function() {
                alert(‘GeeksForGeeks’);
            });
        }
    }

    chevron_right

    
    

  • To run this application:
    After including the above code in HTML and component section of your app, we will run this app by entering the command in the terminal:

     ng serve 


    after entering the above command go to your web browser and hit the address https://localhost:4200/ to load your application.

    Output:

In the above code, we first import jquery to use its component. We then need to implement ngOnInit Lifecycle Hook which can be imported from Angular Core. We can write jQuery code inside the method ngOnInit, To add the action to the button we created in app.component.html, we add a button.click event inside ngOnInit method.
Now to run the above program

Example: In this example, we use jquery in angular to animate a filed in Html. We write the Html code in app.controller.html and write the angular code/jquery in app.controller.ts.
HTML Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Jquery in Angular</title>
</head>
  
<body>
    <h1 style="color:green">
      GeeksforGeeks
  </h1>
    <h2>Jquery in Angular</h2>
    <button>Start Animation </button>
    <div style="border:1px solid;
                border-radius:3px; 
                color:white;
                background:green; 
                height:105px; 
                width:260px; 
                position:relative;">
      jQuery in Angular
  </div>
</body>
  
</html>

chevron_right


Angular Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component, OnInit} from ‘@angular/core’;
import * as $ from '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");
            });
        });
}

chevron_right


Output:
Before Clicking the button

After Clicking the button



My Personal Notes arrow_drop_up

Pursuing BE in Information technology Passionate Coder Loves Python3 and Anaconda

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.