Using jQuery plugin with Angular 2 app

Question

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!

This is essentially the same as asking how to install a Model T carburetor in a Ferrari. — user663031
– user663031, Commented Jun 29, 2016 at 15:51
not as answer, but if somebody will look for solution, here is a nice article about it: radzen.com/blog/jquery-plugins-and-angular — pomaxa
– pomaxa, Commented Apr 18, 2017 at 18:59

fingerpich · Accepted Answer · 2017-02-28 08:30:11Z

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.

answered Feb 28, 2017 at 8:30

fingerpich

9,4002 gold badges24 silver badges34 bronze badges

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

1 Comment

S Raghav Over a year ago

Note that ElementRef returns undefined for DOM elements in the template within an *ngIf. Use [hidden] instead

Reginaldo Camargo Ribeiro · Accepted Answer · 2016-06-29 16:04:36Z

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.

answered Jun 29, 2016 at 16:04

Reginaldo Camargo Ribeiro

7684 silver badges15 bronze badges

2 Comments

TheUnreal Over a year ago

Nothing here about a jquery library

Reginaldo Camargo Ribeiro Over a year ago

I think a better approach is place this script on component initialization.

Collectives™ on Stack Overflow

Using jQuery plugin with Angular 2 app

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related