How to use jQuery with Angular 2?

Using jQuery with Angular 2, if we are using typescript (5, 6 and 7 versions) we should first add jQuery reference definition.

Stayed Informed – Angular 2 vs. Angular 1
Stayed Informed – Best Angular 2 Interview Q/A

We can see below line of code to install jQuery i.e.

tsd install jquery --save

typings install dt~jquery --global –save

And also we need to add the ts reference file.

/// <reference path="../typings/jquery/jquery.d.ts" />

Then make the necessary imports

import {bootstrap}    from 'angular2/platform/browser';
import {Component, ElementRef, AfterViewInit} from 'angular2/core';

Now, declare jQuery module and the declaring jQuery variable as JQueryStatic will give us a typed reference to jQuery.

declare module "jquery" {
    export = jQuery;
}
declare var jQuery: JQueryStatic;

In the last, write the class and components

@Component({
  selector: 'customer-app',
  templateUrl: 'index.html'
})
export class CustomerComponent implements AfterViewInit {
constructor(private el:ElementRef) {    }
  ngAfterViewInit() {   
         if(!CustomerComponent.chosenInitialized) {
           //TODO: your logic   jQuery(this.el.nativeElement)…
       }
  }
}

This live demo example,

For more detail go to links,

http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2

http://stackoverflow.com/questions/35054004/how-to-use-jquery-with-javascript-in-angular-2

https://codedump.io/share/kQF7Ts1Iu5d/1/how-to-use-jquery-with-angular2

I hope you are enjoying with this post! Please share with you friends. Thank you so much!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

How to use jQuery with Angular 2?

Reviewed by Anil Singh on 12:14 AM Rating: (5)