How can I use a jQuery plugin in Angular2?

Question

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.

Try to move initialization from constructor to ngAfterViewInit hook — yurzui, May 19 '16 at 17:45

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

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
    });
  }

}

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 19 '16 at 17:39

Tibor Szasz

3,028
2
18
23

That's for Angular1. I've already got jQuery working. Just that the plugins don't. – Luke May 19 '16 at 17:43

How can I use a jQuery plugin in Angular2?

2 Answers2