How to run jQuery in Angular 8?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to run jQuery in Angular 8?

Some time or I can say, I do my mostly code with the help of jQuery so I will definitely use Jquery into my Angular 8 project.

Here I am going to tell you working steps to run jQuery in Angular 8 and please follow carefully:

1. Here are the basics commands to add Angular 8 setup into your PC:

$ npm install -g @angular/cli //Setup Angular8 atmosphere

$ ng new angularlatest8 //Install New Angular App

/**You need to update your Nodejs also for this verison**/

$ cd angularlatest8 //Go inside the Angular 8 Project

2. After Install Angular 8 fresh setup and go inside the Angular 8 setup, run below command into your terminal to install  jQuery modules:

$ npm install jquery –save //Add jquery module

3. Here is the code, you need to add into your angular.json file in root folder:

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

4. Here is the code, you need to add into your src/app/app.component.ts file:

import { Component } from '@angular/core';
declare var $: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'jquery in angular 8';

ngOnInit(){
       $('body').addClass('df');
}
}

5. After run below command, you can see in firebug that body has class name “df”:

ng

ng serve

This is it. If you have any query related to this post then please do comment below or ask question.

Harjas,

Thank you