CODEWITHSUNDEEP
angular
TheUnreal
TheUnreal

Reputation: 24472

Using jQuery plugin with Angular 2 app

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!

Upvotes: 4

Views: 5339

Answers (2)

fingerpich
fingerpich

Reputation: 9330

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.

Upvotes: 1

Reginaldo Camargo Ribeiro
Reginaldo Camargo Ribeiro

Reputation: 768

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.

Upvotes: 0

Related Questions