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 the roundSlider CDN after the jquery CDN. Then inside one of the components in the HTML I place the following:

<div id="range"></div>

In that components TS file I've inserted the following inside the ngOnInit():

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

That's according to the documentation on http://roundsliderui.com/

Now nothing really appears, I've searched everywhere on the internet but can't really find out what's happening.

Help would be greatly appreciated!

回答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!

回答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

回答3:

Do this code in the ngAfterViewInit() method:

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

回答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' ]
})
export class AppComponent  {
  name = 'Angular';

  ngOnInit() {

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

  }
}