check out the repo on stackblitz: demo
To install this the slider, run:
npm install ngx-circular-slider --save
You can import the slider in any Angular application by running:
npm install ngx-circular-slider
and then from your Angular AppModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { NgxCircularSliderModule } from 'ngx-circular-slider';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxCircularSliderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once the ngx-circular-slider module is imported, you can use it in your Angular application:
<!-- You can now use the slider in app.component.html -->
<ngx-cs-slider (update)="handleSliderChange($event)"
[props]="sliderProps"
[startAngle]="start"
[angleLength]="length">
startAngle
[number
] - required the angle of the circle where the slider startsangleLength
[number
] - required the length of the circum-radius for the sliderupdate
[$event({angleLength: number; startAngle: number;})
] - the handler for the update event which returns the angleLength and the startAngle after the slider was changedprops
[IProps
] - the properties for the slider.
interface IProps {
segments?: number;
strokeWidth?: number;
radius?: number;
gradientColorFrom?: string;
gradientColorTo?: string;
bgCircleColor?: string;
showClockFace?: boolean;
clockFaceColor?: string;
}
Use angular-cli tools to generate, test and lint your code. Put your library code in src/app/lib folder. Only this folder and subfolders will be published.
to make the app run and or change and publish:
10.4.
or if you use nvm use nvm use
npm install
To generate library's *.js
, *.d.ts
and *.metadata.json
files:
npm run build:slider
npm version patch|minor|major
cd dist/ngx-circular-slider
npm version patch|minor|major
npm publish
-To generate the doc:
npm run docs