Angular 8 Install Jquery using npm command

January 22, 2020 | Category : Angular 8

Here, i will let you know how to install jquery in angular 8 application. i will install npm jquery in angular 8. i will give you command of installing jquery in angular application.

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

I hope it can help you...