How To Use Roundsliderui In Angular 6

I want to have an input from the type range in my angular application. That's actually working. I've included jQuery what's working fine as well. In the index.html I've included th

Solution 1:

Okay, I figured things out, what I needed to do was as follows:

1. Install jQuery: npm install jquery --save
2. Install typings for jQuery: npm install @types/jquery --save-dev
3. Install RoundSliderUI npm i round-slider see npm round-slider
4. In tsconfig.app.json add jQuery under types; the result for me looks like this:

{"extends":"../tsconfig.json","compilerOptions":{"outDir":"../out-tsc/app","types":["jquery"]},"exclude":["src/test.ts","**/*.spec.ts"]}

5. In angular.json add the path to the scripts:

"scripts":["./node_modules/jquery/dist/jquery.min.js","./node_modules/round-slider/dist/roundslider.min.js"]

6. Also add in angular.json the path to the css file under styles:

"styles":["src/styles.scss","./node_modules/round-slider/dist/roundslider.min.css"]

7. In typings.d.ts add the following, if the file doesn't exist create it in the folder where the index.html is located as well.

interface JQuery {
  roundSlider(options?: any): any;
}

8. Now you should be able to include a slider anywhere <div id="slider"></div>

Hope this will help for some!

Solution 2:

To use jquery in angular app, you need to do

npm install jquery --save

then inside the page add this import

import * as $ from"jquery";

In angular.json, please include roundslider.js and roundslider.css file under scripts and styles section.

You can also refer github issues with Angular 2 integration https://github.com/soundar24/roundSlider/issues?q=angular+is%3Aopen

Solution 3:

Do this code in the ngAfterViewInit() method:

$("#range").roundSlider({radius:80,circleShape:"pie",sliderType:"min-range",showTooltip:false,value:11,startAngle:315});

Solution 4:

Currently roundSlider don't have the built-in support for Angular, but still you can integrate it with your angular applications in the jQuery way itself.

Check the below simple demo:

https://stackblitz.com/edit/angular-yabjjf

import { Component } from'@angular/core';
import $ from'jquery';
window.jQuery = $;
import'round-slider';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
exportclassAppComponent  {
  name = 'Angular';

  ngOnInit() {

    $("#slider1").roundSlider({
      value: 45
    });

  }
}