Angular 8Jquery

How to run jQuery in Angular 8?

Angular 8 chartjs working example
Views

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
Add and Run Jquery in Angular 7

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

Harjas,

Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Positive SSL