How to use jQuery with javascript in angular 2

Question

    import {Component, ElementRef, OnInit} from 'angular2/core';
    declare var jQuery:any;
    @Component({
      selector: 'jquery-integration',
      templateUrl: './components/jquery-integration/jquery-integration.html'
    })
    export class JqueryIntegration implements OnInit {
      elementRef: ElementRef;
      constructor(elementRef: ElementRef) {
        this.elementRef = elementRef;
      }
      ngOnInit() {
        jQuery(this.elementRef.nativeElement).draggable({
        containment:'#draggable-parent'
      });
    }
  }

Can jQuery be used with TypeScript in Angular2 like the above? How do I use jQuery with JavaScript in Angular2?

Answer 1

In my opinion: if you do it right and if you keep it minimal, you should go with that.

1. Install jQuery Typings in project: tsd install jQuery
2. Load jQuery with script tag ( or other loaders... )
3. Wrap any jQuery plugin with Angular 2 Directive

Example:

@Directive({
  selector: "[sm-dropdown]"
})
export class SMDropdown {
  constructor(el: ElementRef) {
    jQuery(el.nativeElement).dropdown();
  }
}

Consider this Plunker:

https://plnkr.co/edit/MMNWGh?p=preview

Don't:

• Don't use it for DOM manipulation, there is Angular way...
• Don't use it for AJAX calls, there is Angular way...
• Don't use it for animation, ngAnimation is coming...

Answer 2

Once you have the JQuery typescript library installed, reference it in this way

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

Then make the necessary imports

import {Component, AfterViewInit} from 'angular2/core';

Now write the class

@Component({
  selector: 'my-app',
  templateUrl: 'app/html/app.component.html'
})

export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    // Your jQuery code goes here
    $('#here').text("HALLO! ^_^");
  }
}