Angular 5 - include jquery plugin

Question

Im new to angular, currently working with version 5. I have to install a plugin called 'jquery-circle-progress', which can be found here: http://kottenator.github.io/jquery-circle-progress/

I've installed it with via npm, and added the .js file to .angular-cli.json scripts array. It seems to load fine, and I can activate it with jquery via browsers console, so this part is ok.

I just dont know how to run it from inside the component. I have to update this progress bar every minute or so, so I wanna make a function in mycomponent.component.ts, which fetches some data, checks it, and runs some jquery to update the progress bar.

I just cant get this progress-bar's function to be available here. It just says that '.circleProgress is not available'.

BTW I can get jquery to run inside of the .ts file, via:

import * as $ from 'jquery';

I dont know how to also get circle progress bar in here.

Any help is more than welcome.

There are a few Angular circular progress bar libraries out there such as github.com/crisbeto/angular-svg-round-progressbar -- do any of these work for you? — Explosion Pills
– Explosion Pills, Commented Oct 8, 2018 at 14:10
Take a look at the accepted answer at stackoverflow.com/questions/48768087/… — Abbas Amiri
– Abbas Amiri, Commented Oct 8, 2018 at 14:53

codeepic · Accepted Answer · 2018-10-08 14:12:43Z

2

You need to import the plugin code in your angular.json (used to be angular-cli.json) file in scripts array:

"scripts": [
      "node_modules/jquery/dist/jquery.js",
      "node_modules/nouislider/distribute/nouislider.min.js",
]

As you can see above, you can also import jQuery in there - first node module. The next is a jQuery plugin I had to use in my project.

Then create a new Angular wrapper component that will hold the jQuery plugin and initialise it in ngOnInit() method and eventually do the cleanup in ngOnDestroy() method. At the top of your component drop this declare var $:any; You don't have to use import * as $ from 'jquery'; since jQuery is imported into your app in angular.json file.

answered Oct 8, 2018 at 14:12

codeepic

4,1628 gold badges39 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

Angular 5 - include jquery plugin

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related