Using jQuery Plugin with Angular 2 Application

Question

How can I use jQuery plugin with Angular 2 app?

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

All I know is that I need to import jQuery and the .js plugin into my index.html, but how can I put such code (shown in the plugin documentation):

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

in an Angular 2 application - I have no idea!

Answer 1

You better not use jquery and use a directive, such as a progress circle , but you can write a directive that uses the jquery plugin.

Angular, , , ,

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

.

Answer 2

jquery javascript . javascript, index.html. , , , TS jquery. (d.ts), npm, tsd tsd jquery.d.ts.