4

How I can use jQuery plugin with Angular 2 app?

For example: circliful (https://github.com/pguso/jquery-plugin-circliful).

All I know is that I have to import jQuery and the plugin .js into my index.html, but how I can place a code like this (shown in the plugin documentation):

<script>
$( document ).ready(function() {
        $("#your-circle").circliful({
        animationStep: 5,
        foregroundBorderWidth: 5,
        backgroundBorderWidth: 15,
        percent: 75
    });
    });
</script>

into an angular 2 app - I have no idea!

TheUnreal
  • 23,434
  • 46
  • 157
  • 277
  • This is essentially the same as asking how to install a Model T carburetor in a Ferrari. –  Jun 29 '16 at 15:51
  • not as answer, but if somebody will look for solution, here is a nice article about it: http://www.radzen.com/blog/jquery-plugins-and-angular/ – pomaxa Apr 18 '17 at 18:59

2 Answers2

1

You had better not to use jquery and use the directive like circle progress bar by the way, but its possible to write a directive which uses a jquery plugin.

There are three kinds of directives in Angular but you need to use Attribute directives to embed this library like the following code

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
    selector: '[circliful]'
})
export class CirclifulDirective {
   constructor(private el: ElementRef) { 
       $(el).circliful({
           animationStep: 5,
           foregroundBorderWidth: 5,
           backgroundBorderWidth: 15,
           percent: 75
       });
   }
}

and then you could use this directive.

fingerpich
  • 8,500
  • 2
  • 22
  • 32
  • Note that ElementRef returns undefined for DOM elements in the template within an *ngIf. Use [hidden] instead – S Raghav Apr 26 '17 at 04:41
0

You need to use both javascript files and definition files to run jquery. To add the javascript files just put them in the index.html. To add definition files isn't required, but it's a good idea, because in the TS domain you'll be able to autocomplete and check jquery methods. If you want to use definition files (d.ts) you need to install, using npm, tsd and use tsd to install jquery.d.ts file.

Reginaldo Camargo Ribeiro
  • 767
  • 4
  • 15