Knob is an Angular component to set values with the typical Knob control (for instance, very used in music hardware). The
component is very basic, you just need to configure the range of values admited, and the degrees the knob can manage. This component doesn't suply any skin by itself but you can find some example skins here too: https://github.com/spheras/knob/tree/master/skins
The following are two examples of what you can achieve with this component:
Getting Started
Installing the Component
First of all you'll need to add it to your project as a dependency, i.e. with npm:
npm install ng2-knob --save
Using the Component
Using Knob widget is pretty simple. First, import the component inside the module of your Angular Application, like this:
import{KnobModule}from'ng2-knob';
...
@NgModule({
...
declarations:[
AppComponent,
...
],
imports:[
BrowserModule,
FormsModule,
KnobModule,
...
...
})
exportclassAppModule{}
Add the Component to your Application
To start working with the new component, add it to the html part of the component you desire:
To use correctly the knob, you will need probably a container and a div (like info div in the example) to show the current value of the knob. The container will have the base skin (which is static and don't rotate), and the info will show the meter value of the knob. You can find some examples below.
The minimum value you need for the range of values [min,max]
max (type: number)
The maximum value you need for the range of values [min,max]
value (type: number)
The starting value you want for the knob. Consider to put a value between min and max.
startDegree (type: number)
The knob rotate from a start degree to an end degree. This is the start degree.
endDegree (type: number)
The knob rotate from a start degree to an end degree. This is the end degree.
intensive (type: boolean)
true (default) if you want to be notified on each small change by the change event. If not, you will be notified only after the end of modification.
Public Methods
setInitialValue (value: number)
If you need to set the initial value by code, or set a value by code you can do it calling this function. Don't forget to pass a value between the range [min,max].
Example:
@ViewChild('myKnob1') knob: KnobComponent;
doSomething(){
let someValue:number=50;
this.knob.setInitialValue(someValue);
}
Output Events
The component emit an event at every change value of the knob. You can listen to these events using the change property with the $event property received.
You can use the component just binding the value with the ngModel property. This way, you'll probably don't need the change event or setInitialValue or value property. For instance:
In this example, the knob is linked with the myknob1_metervalue variable from your controller. Whenever the knob change its value, or the variable is modified, everything will be updated.
