How to run jQuery in Angular 6?

·

,
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.

Comments

3 responses to “How to run jQuery in Angular 6?”

  1. vj Avatar
    vj

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

  2. Ajay Malhotra Avatar
    Ajay Malhotra

    Are you using this in angular 6?

  3. Ajay Avatar
    Ajay

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