angular2-knob v1.1.15

angular-knob

Angular directive for Knob component using d3.js v4 without jQuery dependencies

Features

• very easy to implement
• without jQuery dependencies
• powered by d3.js v4
• configurable minimum, maximum values and step
• animated
• great ability to configure
• configurable scale
• touch, click and drag events implemented

Dependencies

• Angular 2+
• D3.js V4
• @types/d3-selection@^1.1.0

Browser Support

• Chrome, Firefox, Safari, Opera, IE9+

Get started

Installation

You can also use bower to install the component:

$ npm install angular2-knob --save

Usage

IMPORTING ANGULAR MODULE:

import { KnobModule } from "angular2-knob";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [KnobModule]
  bootstrap: [AppComponent]
})

HTML USE:

<div ui-knob [value]="value" [options]="knOptions"></div>

CONFIGURING OPTIONS IN ANGULAR COMPONENT:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  knOptions = {
    readOnly: true,
    size: 140,
    unit: '%',
    textColor: '#000000',
    fontSize: '32',
    fontWeigth: '700',
    fontFamily: 'Roboto',
    valueformat: 'percent',
    value: 0,
    max: 100,
    trackWidth: 19,
    barWidth: 20,
    trackColor: '#D8D8D8',
    barColor: '#FF6F17',
    subText: {
      enabled: true,
      fontFamily: 'Verdana',
      font: '14',
      fontWeight: 'bold',
      text: 'Overall',
      color: '#000000',
      offset: 7
    },
  }
  value = 45; 
}

Options

You can pass these options to the initialize function to set a custom look and feel for the plugin.