how to use jquery in angular 2?

Question

I know if i I need to use 3rd party library in angular 1.3 or 1.4 .I need to make directive of that thing and use that in our project .Now I am using angular 2.0 .I want to make this in angular 2 https://jqueryui.com/autocomplete/ or this https://jsfiddle.net/2rgrmv4q/

can I use jquery in angular2.

1.How I will use 3rd party library in angular.

2.How I make auto complete of jquery in angular 2.

here is my code http://plnkr.co/edit/BxMcNXLjVOJBAIiBGL5Y?p=preview

// Code goes here

import {Component,View} from 'angular2/core';
@Component({
  selector:'my-app'
  templateUrl: 'home/home.html',
})
export class AppComponent {
  constructor() { }
 }

Pardeep Jain · Accepted Answer · 2016-02-14T13:03:19.643

2

You just need to declare one variable and put values or initilize that variable with the values that your required. in the constructor you have to define Jquery part . take a look at this.Here is working example for Autocomplete which is required to you

http://plnkr.co/edit/dAMQc0EN6rSS4dEuTR7E?p=preview

Just put this code into the constructor :

export class AppComponent { 
  availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",...
    ];
  constructor(){
    $( "#tags" ).autocomplete({
      source: this.availableTags
    });
  }
}

edited Feb 14 '16 at 13:03

answered Feb 14 '16 at 12:57

Pardeep Jain

84,110
37
165
215

Where have you created variable? would you please explain? unable to figure out? – micronyks Feb 14 '16 at 14:00
i Have declare variable name `availableTags` inside the class and outside the constructor. and then assign some values to the variable as explained in the answer. then use the same variable using `this` in the constructor. hope now clear. – Pardeep Jain Feb 14 '16 at 14:03
Oh great ! Got that ! But I'd like to know what was that which could also be done with `///`. And this way will it work out of constructor? I mean to say any where in the component ? or this way it has restriction? – micronyks Feb 14 '16 at 14:08
1

yups :) upvote if this answer is helpful to you. and one thing more `///` is type of importing file to the .ts file. if we want to add particular file i.e javascript file we have import via this way. normally we can call it as `typings` – Pardeep Jain Feb 14 '16 at 14:17
Thanks for the help ! – micronyks Feb 14 '16 at 14:22

score 2 · Answer 2 · edited May 23 '17 at 12:25

2

If you don't care about jQuery typings, you can just declare $:

import {Component, ElementRef,Directive, EventEmitter,Output} from 'angular2/core';

declare var $: any;

If you're looking for typings, you can follow this post:

using jQuery globaly within angular 2 application

edited May 23 '17 at 12:25

Community

1
1

answered Feb 14 '16 at 14:47

Michael Kang

52,003
16
103
135

how to use jquery in angular 2?

2 Answers2

Linked