check out the repo on stackblitz: [demo](https://stackblitz.com/github/craftworksgmbh/ngx-circular-slider)
npm install ngx-circular-sliderbash
npm install ngx-circular-slider --save
`
Consuming your ngx-circular-slider
You can import the slider in any Angular application by running:
`bash
npm install ngx-circular-slider
`
and then from your Angular AppModule:
`typescript
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:
`xml
[startAngle]="start"
[angleLength]="length">
`
API
* startAngle [number] - required the angle of the circle where the slider starts
* angleLength [number] - required the length of the circum-radius for the slider
* update [$event({angleLength: number; startAngle: number;})] - the handler for the update event which returns the angleLength and the startAngle after the slider was changed
* props [IProps] - the properties for the slider.
`typescript
interface IProps {
segments?: number;
strokeWidth?: number;
radius?: number;
gradientColorFrom?: string;
gradientColorTo?: string;
bgCircleColor?: string;
showClockFace?: boolean;
clockFaceColor?: string;
}
`
todos
* test module api
* adapt readme
* replace gulp with webpack
generate types without .d.ts
* fixes module-api
* tests
Development
Use angular-cli tools to generate, test and lint your code.
Put your library code in src/app/library folder. Only this folder and subfolders will be published.
To generate library's .js, .d.ts and *.metadata.json files:
`bash
npm version patch|minor|major
npm run publish dist
`
To generate the doc:
`bash
npm run docs
``