CODEWITHSUNDEEP
javascriptjquerytypescriptangular
Luke
Luke

Reputation: 49

How can I use a jQuery plugin in Angular2?

I'm trying to use packery in one of my Angular2 projects. However I just can't seem to get it to work in a directive. This is my packery.directive.ts file

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

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[packery]'
})

export class Packery {

  constructor(el: ElementRef) {
    jQuery(el.nativeElement).packery({
      itemSelector: '.grid-item',
      gutter: 10
    });
  }
}

The code doesn't work although it initializes when I use it without the options. i.e.

.....
export class Packery {

  constructor(el: ElementRef) {
    jQuery(el.nativeElement).packery();
  }
}

However, with the options, I'll get an error 

Supplied parameters do not match any signature of call target.

The typings file already has the types declared as optional.

declare module "packery" {
interface PackeryOptions {
    itemSelector?: string;
    gutter?: number;
......................

Appreciate it if someone can lead me to the direction of correctly implementing a jQuery plugin in TypeScript. Thanks.

Upvotes: 1

Views: 1068

Answers (2)

Luke
Luke

Reputation: 49

I've finally managed to solved it using the solution posted at https://stackoverflow.com/a/34570534/6070591

My current directive code

import { Directive, ElementRef, Inject, OnInit } from '@angular/core';

declare var jQuery: any;

@Directive({
  selector: '[packery]'
})

export class Packery implements OnInit {
  elementRef: ElementRef;

  constructor( @Inject(ElementRef) elementRef: ElementRef) {
    this.elementRef = elementRef;
  }


  ngOnInit() {
    jQuery(this.elementRef.nativeElement).packery({
      // options
      itemSelector: '.grid-item',
      gutter: 10
    });
  }

}

Upvotes: 2

Tibor Szasz
Tibor Szasz

Reputation: 3227

You probably need to import it or check version compatibility:

From the FAQ: https://docs.angularjs.org/misc/faq

Does Angular use the jQuery library?

Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular but we don't guarantee that.

Upvotes: 0

Related Questions