How to use jQuery in Angular 10 Projects?

If you need to see example of angular 10 install jquery. let’s discuss about how to use jquery in angular 10. This post will give you simple example of use jquery in angular 10 project. it's simple example of how to install jquery in angular 10.

Few days ago i posted how to install bootstrap 4 in angular 10 application. so you can also see tutorial if you want to know how to add bootstrap and jquery in angular 10. here is a link Install Bootstrap 4 with Angular 10.

Sometime, we need to use jquery in angular 10 application for some core logic. you can can easily use jquery using npm package. so let's see bellow how to install and how to use jquery with angular 10 application.

You can easily create your angular app using bellow command:

ng new my-new-app

Install Jquery

In this solution, you need to just install jquery on your angular 10 and import js file. so you can run command bellow:

npm install jquery -- save

Ok, now you need to import your jquery file as like bellow:

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

Now i will give you component code and show you you how to use jquery $. So let's see bellow component file code as bellow:

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');
       });
    }
}

Now you can use all event and function of jquery as like bellow.

You can run angular 10 application and check it.

You will see layout as like bellow:

I hope it can help you...