jQuery UI Widgets Forums Angular knob value after change

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  ivanpeevski 1 year, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • knob value after change #121176

    alnajar85
    Participant

    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>

    knob value after change #121177

    ivanpeevski
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.