Angular Install Jquery npm Example

By Hardik Savani | January 11, 2020 | Category : Angular


Here, i want to give you simple example of how to install jquery in angular cli project. i also want to give you example of how to use jquery in angular application. we will install jquery using npm cli command.

So, you can easily use jquery with angular 6, angular 7, angular 8, angular 9 and angular 10 application.

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

Sometime, we need to use jquery in angular 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 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 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 application and check it.

You will see layout as like bellow:

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: