How to use jQuery with Angular?

Question

Can anyone tell me, how to use jQuery with Angular?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

I'm aware there are workarounds like manipulating the class or id of the DOM element upfront, but I'm hoping for a cleaner way of doing it.

Answer 1

Using jQuery from Angular2 is a breeze compared to ng1. If you are using TypeScript you could first reference jQuery typescript definition.

tsd install jquery --save
or
typings install dt~jquery --global --save

TypescriptDefinitions are not required since you could just use any as the type for $ or jQuery

In your angular component you should reference a DOM element from the template using @ViewChild() After the view has been initialized you can use the nativeElement property of this object and pass to jQuery.

Declaring $ (or jQuery) as JQueryStatic will give you a typed reference to jQuery.

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;

@Component({
    selector: 'ng-chosen',
    template: `<select #selectElem>
        <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
        </select>
        <h4> {{selectedValue}}</h4>`
})
export class NgChosenComponent implements AfterViewInit {
    @ViewChild('selectElem') el:ElementRef;
    items = ['First', 'Second', 'Third'];
    selectedValue = 'Second';

    ngAfterViewInit() {
        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.selectedValue = args.selected;
            });
    }
}

bootstrap(NgChosenComponent);

This example is available on plunker: http://plnkr.co/edit/Nq9LnK?p=preview

tslint will complain about chosen not being a property on $, to fix this you can add a definition to the JQuery interface in your custom *.d.ts file

interface JQuery {
    chosen(options?:any):JQuery;
}    

Answer 2

This is what worked for me.

STEP 1 - First things first

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

STEP 2 - IMPORT

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

#UPDATE - Feb - 2017

Lately, I'm writing code with ES6 instead of typescript and am able to import without * as $ in the import statement. This is what it looks like now:

import $ from 'jquery';
//
$('#elemId').width();

Good Luck.

Answer 3

Why is everyone making it a rocket science? For anyone else who needs to do some basic stuff on static elements, for example, body tag, just do this:

1. In index.html add script tag with the path to your jquery lib, doesn't matter where (this way you can also use IE conditional tags to load lower version of jquery for IE9 and less).
2. In your export component block have a function that calls your code: $("body").addClass("done"); Normaly this causes declaration error, so just after all imports in this .ts file, add declare var $:any; and you are good to go!

Answer 4

Now it has become very easy, You can do it by simply declaring jQuery variable with any type inside Angular2 controller.

declare var jQuery:any;

Add this just after import statements and before component decorator.

To access any element with id X or Class X you just have to do

jQuery("#X or .X").someFunc();

Answer 5

A simple way:

1. include script

index.html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. declare

my.component.ts

declare var $: any;

3. use

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
 ...
  $("#myselector").style="display: none;";
}

Answer 6

Please follow these simple steps. It worked for me. Lets start with a new angular 2 app to avoid any confusion. I'm using Angular cli. So, install it if you don't have it already. https://cli.angular.io/

Step 1: Create a demo angular 2 app

ng new jquery-demo

you can use any name. Now check if it is working by running below cmd.(Now, make sure that you are pointing to 'jquery-demo' if not use cd command )

ng serve

you will see "app works!" on browser.

Step 2: Install Bower (A package manager for the web)

Run this command on cli (make sure that you are pointing to 'jquery-demo' if not use cd command ):

npm i -g bower --save

Now after successful installation of bower, Create a 'bower.json' file by using below command:

bower init

It will ask for inputs, just press enter for all if you want default values and at the end type "Yes" when it'll ask "Looks good?"

Now you can see a new file (bower.json) in folder "jquery-demo". You can find more info on https://bower.io/

Step 3: Install jquery

Run this command

bower install jquery --save

It will create a new folder (bower_components) which will contain jquery installation folder. Now you have jquery installed in 'bower_components' folder.

Step 4: Add jquery location in 'angular-cli.json' file

Open 'angular-cli.json' file (present in 'jquery-demo' folder) and add jquery location in "scripts". It will look like this:

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

Step 5: Write simple jquery code for testing

Open 'app.component.html' file and add a simple code line, The file will look like this:

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

Now Open 'app.component.ts' file and add jquery variable declaration and code for 'p' tag. You should use lifecycle hook ngAfterViewInit() also. After making changes the file will look like this:

import { Component, AfterViewInit } from '@angular/core';
declare var $:any;

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
     title = 'app works!';

     ngAfterViewInit(){
           $(document).ready(function(){
             $("p").click(function(){
             $(this).hide();
             });
           });
     }
}

Now run your angular 2 app by using 'ng serve' command and test it. It should work.

Answer 7

Using Angular Cli

 npm install jquery --save

In angular.json under scripts array

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

Now to use jQuery, all you have to do is to import it as follows in whatever component you want to use jQuery.

For example importing and using jQuery in root component

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

Answer 8

You can implement the lifecycle hook ngAfterViewInit() to add some DOM manipulations

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

Be careful when using router because angular2 may recycle views .. so you have to be sure that the DOM elements manipulations are done only in the first call of afterViewInit .. ( You can use static boolean variables to do so )

class Component {
    let static chosenInitialized  : boolean = false;
    ngAfterViewInit() {
        if (!Component.chosenInitialized) {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
            Component.chosenInitialized = true;
        }
    }
}

Answer 9

step 1: use the command : npm install jquery --save

step 2: you can simply import angular as :

import $ from 'jquery';

that's all .

An example would be :

import { Component } from '@angular/core';
import  $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  constructor(){
    console.log($('body'));
  }


}

Answer 10

I do it in simpler way - first install jquery by npm in console: npm install jquery -S and then in component file I just write: let $ = require('.../jquery.min.js') and it works! Here full example from some my code:

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
    selector: 'departments-connections-graph',
    templateUrl: './departmentsConnectionsGraph.template.html',
})

export class DepartmentsConnectionsGraph implements OnInit {
    rootNode : any;
    container: any;

    constructor(rootNode: ElementRef) {
      this.rootNode = rootNode; 
    }

    ngOnInit() {
      this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
      console.log({ container : this.container});
      ...
    }
}

In teplate I have for instance:

<div class="departments-connections-graph">something...</div>

---

EDIT

Alternatively instead of using:

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

use

declare var $: any;

and in your index.html put:

<script src="assets/js/jquery-2.1.1.js"></script>

This will initialize jquery only once globaly - this is important for instance for use modal windows in bootstrap...

Answer 11

If you use angular-cli you can do :

1. Install the dependency :

   npm install jquery --save

   npm install @types/jquery --save-dev

2. Import the file :

   Add "../node_modules/jquery/dist/jquery.min.js" to the "script" section in .angular-cli.json file

3. Declare jquery :

   Add "$" to the "types" section of tsconfig.app.json

You can find more details on official angular cli doc

Answer 12

//installing jquerynpm install jquery --save

//installing type defintion for the jquerytypings install dt~jquery --global --save

//adding jquery library into build configuration file as specified(in "angular-cli-build.js" file)

vendorNpmFiles: [
  .........
  .........
  'jquery/dist/jquery.min.js'
]

//run the build to add the jquery library in the build ng build

//adding the relative path configuration(in system-config.js) /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

//import the jquery library in your component file

import 'jquery';

below is the code snipppet of my sample component

import { Component } from '@angular/core';
import 'jquery';
@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css']
})
export class AppComponent {
  list:Array<number> = [90,98,56,90];
  title = 'app works!';
  isNumber:boolean = jQuery.isNumeric(89)  
  constructor(){}
}

Answer 13

To Use Jquery in Angular2(4)

Follow these setps

install the Jquery and Juqry type defination

For Jquery Installation npm install jquery --save

For Jquery Type defination Installation npm install @types/jquery --save-dev

and then simply import the jquery

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
  console.log($(window)); // jquery is accessible 
}

Answer 14

Since I'm a dunce, I thought it would be good to have some working code.

Also, Angular2 typings version of angular-protractor has issues with the jQuery $, so the top accepted answer doesn't give me a clean compile.

Here are the steps that I got to be working:

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

Inside my.component.ts

import {
    Component,
    EventEmitter,
    Input,
    OnInit,
    Output,
    NgZone,
    AfterContentChecked,
    ElementRef,
    ViewChild
} from "@angular/core";
import {Router} from "@angular/router";

declare var jQuery:any;

@Component({
    moduleId: module.id,
    selector: 'mycomponent',
    templateUrl: 'my.component.html',
    styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
    scrollLeft() {

        jQuery('#myElement').animate({scrollLeft: 100}, 500);

    }
}

Answer 15

Just write

declare var $:any;

after all import sections, you can use jQuery and include the jQuery library in your index.html page

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

it worked for me

Answer 16

I am skipping installation of jquery since this point has been mentioned in all of the posts created prior to mine. So, you have already installed jquery. Importing t into your component like this

import * as $ from 'jquery';

will work, but there is another 'angular" way to do this by creating a service.

Step no. 1: create jquery.service.ts file.

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

Step. no. 2: register the service in app.module.ts

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

Step no. 3: inject the service into your component my-super-duper.component.ts

import { Component, Inject } from '@angular/core';

export class MySuperDuperComponent {
    constructor(@Inject(JQUERY_TOKEN) private $: any) {}

    someEventHandler() {
        this.$('#my-element').css('display', 'none');
    }
}

I will be very grateful if somebody can explain pros and cons of both methods: DI jquery as a service vs. import * as $ from 'jquery';

Answer 17

First, install jQuery using npm as follows:

npm install jquery — save

Second, go to the ./angular-cli.json file at the root of your Angular CLI project folder, and find the scripts: [] property, and include the path to jQuery as follows:

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

Now, to use jQuery, all you have to do is to import it in whatever component you want to use jQuery.

import * as $ from 'jquery';
(or)
declare var $: any;

Take a look at the below code that uses jQuery to animate div on click, especially in the second line. We are importing everything as $ from jQuery.

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}

Answer 18

1) To access DOM in component.

import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
     this.el = el.nativeElement;
     this.dom = new BrowserDomAdapter();
 }
 ngOnInit() {
   this.dom.setValue(this.el,"Adding some content from ngOnInit"); 
 }

You can include jQuery in following way. 2) Include you jquery file in index.html before angular2 loads

      <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- jquery file -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

You can use Jquery in following way, Here i am using JQuery Ui date picker.

    import { Directive, ElementRef} from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      private el: HTMLElement;
      constructor(el: ElementRef) {
        this.el = el.nativeElement;

     }

    ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            //do something on select
         }
        });
    }
}

This work for me.

Answer 19

Others already posted. but I give a simple example here so that can help some new comers.

Step-1: In your index.html file reference jquery cdn

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Step-2: assume we want to show div or hide div on click of a button:

 <input type="button" value="Add New" (click)="ShowForm();">


 <div class="container">
  //-----.HideMe{display:none;} is a css class----//

  <div id="PriceForm" class="HideMe">
     <app-pricedetails></app-pricedetails>
  </div>
  <app-pricemng></app-pricemng>
 </div>

Step-3:In the component file bellow the import declare $ as bellow:

declare var $: any;

than create function like bellow:

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

It will work with latest Angular and JQuery

Answer 20

The most effective way that I have found is to use setTimeout with time of 0 inside of the page/component constructor. This let's the jQuery run in the next execution cycle after Angular has finished loading all the child components. A few other component methods could be used but all I have tried work best when run inside a setTimeout.

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}

Answer 21

Here is what worked for me - Angular 2 with webpack

I tried declaring $ as type any but whenever I tried to use any JQuery module I was getting (for example) $(..).datepicker() is not a function

Since I have Jquery included in my vendor.ts file I simply imported it into my component using

import * as $ from 'jquery';

I am able to use Jquery plugins (like bootstrap-datetimepicker) now

Answer 22

You could also try to import it with the "InjectionToken". As described here: Use jQuery in Angular/Typescript without a type definition

You can simply inject the jQuery global instance and use it. For this you won't be needing any type definitions or typings.

import { InjectionToken } from '@angular/core';

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

When set correctly in your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

You can start using it in your components:

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

Answer 23

Global Library Installation as Official documentation here

1. Install from npm:

   npm install jquery --save

2. Add needed script files to scripts:

   "scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

Restart server if you're running it, and it should be working on your app.

---

If you want to use inside single component use import $ from 'jquery'; inside your component

Answer 24

Install jquery

Terminal$ npm install jquery

(For bootstrap 4...)

Terminal$ npm install popper.js

Terminal$ npm install bootstrap

Then add the import statement to app.module.ts.

import 'jquery'

(For bootstrap 4...)

import 'popper.js'
import 'bootstrap'

Now you will no longer need <SCRIPT> tags to reference the JavaScript.

(Any CSS you want to use still has to be referenced in styles.css)

@import "~bootstrap/dist/css/bootstrap.min.css";