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-14 13:03:19Z

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, 2016 at 13:03

answered Feb 14, 2016 at 12:57

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

micronyks Over a year ago

Where have you created variable? would you please explain? unable to figure out?

Pardeep Jain Over a year ago

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.

micronyks Over a year ago

Oh great ! Got that ! But I'd like to know what was that which could also be done with ///<reference src="server url">. And this way will it work out of constructor? I mean to say any where in the component ? or this way it has restriction?

Pardeep Jain Over a year ago

yups :) upvote if this answer is helpful to you. and one thing more ///<reference src=' '> 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

Community · Accepted Answer · 2017-05-23 12:25:42Z

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, 2017 at 12:25

CommunityBot

11 silver badge

answered Feb 14, 2016 at 14:47

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Collectives™ on Stack Overflow

how to use jquery in angular 2?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related