Hello Devs,

In this tutorial, we are going to learn how to install jquery in angular 10.

We can easily use jquery using npm package.

Follow this step by step guide given below:




Create angular app

ng new my-new-app



Install Jquery

npm install jquery -- save

angular.json

....

"options": {

    "outputPath": "dist/myJquery",

    "index": "src/index.html",

    "main": "src/main.ts",

    "polyfills": "src/polyfills.ts",

    "tsConfig": "tsconfig.app.json",

    "aot": false,

    "assets": [

      "src/favicon.ico",

      "src/assets"

    ],

    "styles": [

      "src/styles.css"

    ],

    "scripts": [

      "node_modules/jquery/dist/jquery.min.js"

    ]

},

....



Use Jquery

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';

declare var $: any;

   

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit{

    title = 'myJquery';

   

    ngOnInit() {

       $(document).ready(function() {

            alert('we call alert from JQuery');

       });

    }

}


I hope this example helps you.