Home Angular6 How to run jQuery in Angular 6?

How to run jQuery in Angular 6?

by therichpost
3 comments
Angular 6 Material Datatables example with Php Mysql data

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

Angular is growing very fastly and popular as single page application. Today I am working with Angular 6 and wanted to run some jquery methods and I succeed and I am sharing that tricks what I did on my app.

Here are the following steps to run or include jQuery into your Angular 6 app:

1. First you need to run below command into your terminal:
  $ npm install jquery --save
2. Add below jquery file path into your angular.json file:
"scripts": ["node_modules/jquery/dist/jquery.js"]
3. Import jquery file into your app.module.ts file:
import * as $ from 'jquery';
4. Declare and finally add jquery code into your app.component.ts file:
declare var $: any;

export class AppComponent {

  ngOnInit() {

  $('body').addClass('df');

  }

}

And you are done.

jquery-angular6

If you have any query related to this post then you can ask question or comment below.

You may also like

3 comments

vj January 24, 2019 - 3:37 am

Hi I followed the same steps.Still getting “ERROR ReferenceError: $ is not defined”

Reply
Ajay Malhotra January 25, 2019 - 6:32 am

Are you using this in angular 6?

Reply
Ajay March 27, 2019 - 6:20 am

you could remove the jquery code from app.module.ts file.

Reply

Leave a Comment

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