knob value after change

[alnajar85Participant]

Hi,
I’m looking to catch the knob value only and pass it within a json message body but couldn’t figure out how where the value after change is, below is my code, thanks in advance.

.ts
export class ChartsBarComponent {
@ViewChild(‘myKnob’, { static: false })
myKnob!: jqxKnobComponent;
@ViewChild(‘myInput’, { static: false })
myInput!: jqxInputComponent;
marks: any =
{
colorRemaining: “#333”,
colorProgress: “#333”,
offset: ‘75%’,
thickness: 3,
size: ‘3%’,
majorSize: ‘9%’,
majorInterval: 10,
minorInterval: 5
};
labels: any =
{
offset: ‘95%’,
step: 30,
visible: true,
formatFunction: (label: string | number): string | number => {
if (label == 0)
return “0”;
if (label == -60)
return “-60”;
if (label == 60)
return “60”;
return label;
}
};
progressBar: any =
{
size: ‘70%’,
offset: ‘0%’
};
pointer: any =
{
type: ‘arrow’, thickness: 20, style: { fill: “#”, stroke: “#333″ },
size: ‘70%’, offset: ‘0%’
};
spinner: any =
{
style: { fill: ”, stroke: ” },
innerRadius: ‘0%’, // specifies the inner Radius of the dial
outerRadius: ‘-70%’ // specifies the outer Radius of the dial
};

myKnobOnChange(event: any): void {
if (event.target.nodeName === ‘INPUT’)
return;
this.myInput.val(event.args.value);
// console.log(event.arg.value)
};
myInputOnChange(): void {
this.myKnob.val(this.myInput.val());
console.log(this.myKnob.val)
};

.html
<jqxKnob #myKnob (onChange)=”myKnobOnChange($event)”
[value]=”0″ [min]=”-60″ [max]=”60″ [startAngle]=”200″
[endAngle]=”340″ [rotation]=””” [snapToStep]=”true”
[marks]=”marks” [labels]=”labels” [spinner]=”spinner” [progressBar]=”progressBar”
[pointer]=”pointer” [step]=”’30′” [dragStartAngle]=”200″ [dragEndAngle]=”340″>
</jqxKnob>

<jqxInput #myInput (onChange)=”myInputOnChange()” [value]=”0″ style=”background-color: #c0d9e0; border-style: inset; border-width: thick;
border-color: #a3bfc9; font-style: inherit;
font-weight: bold; font-size: .7rem;”
type=”number” class=”form-control” >></jqxInput>

[ivanpeevskiParticipant]

Hi alnajar85,

As you can see in our Angular Knob API, you can use the value() method to get the value of the knob, for example:
console.log(this.myKnob.value());

You can also have a look at this demo, based on the code you provided us: Stackblitz demo

Best regards,
Ivan Peevski
jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts