Properties

NameTypeDefault
allowValueChangeOnClick Boolean true

Sets or gets the allowValueChangeOnClick property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [allowValueChangeOnClick]="true">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
allowValueChangeOnDrag Boolean true

Sets or gets the allowValueChangeOnDrag property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [allowValueChangeOnDrag]="true">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
allowValueChangeOnMouseWheel Boolean true

Sets or gets the allowValueChangeOnMouseWheel property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [allowValueChangeOnMouseWheel]="true">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
changing (oldValue: String | Number, newValue: String | Number) => Boolean null

Sets or gets the changing property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [changing]="changing">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
dragEndAngle Number 0

Sets or gets the dragEndAngle property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [dragEndAngle]="420">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
dragStartAngle Number 360

Sets or gets the dragStartAngle property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [dragStartAngle]="120">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [disabled]="true">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
dial KnobDial null
interface KnobDial {
     innerRadius?: Any;
     outerRadius?: Any;
     style?: Any;
     startAngle?: Number;
     endAngle?: Number;
}

Sets or gets the dial property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [dial]="dial">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
endAngle Number 360

Sets or gets the endAngle property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
height String | Number 400

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [height]="400">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
labels KnobLabels null
interface KnobLabels {
     rotate?: Any;
     offset?: String | Number;
     visible?: Boolean;
     step?: Number;
     style?: Any;
     formatFunction?: (label: String | Number) => String | Number;
}

Sets or gets the labels property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
marks KnobMarks null
interface KnobMarks {
     colorProgress?: Any;
     colorRemaining?: Any;
     drawAboveProgressBar?: Boolean;
     minorInterval?: Number;
     majorInterval?: Number;
     majorSize?: String | Number;
     offset?: String;
     rotate?: Boolean;
     size?: String | Number;
     type?: KnobSpinnerMarksType;
     thickness?: Number;
     visible?: Boolean;
}

Sets or gets the marks property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
min Number 0

Sets or gets the min property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
max Number 100

Sets or gets the max property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
progressBar KnobProgressBar null
interface KnobProgressBar {
     offset?: String | Number;
     style?: Any;
     size?: String | Number;
     background?: Any;
     ranges?: Array<Any>;
}

Sets or gets the progressBar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [progressBar]="progressBar">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
pointer KnobPointer null
interface KnobPointer {
     offset?: String | Number;
     type?: String;
     style?: Any;
     size?: Number | String;
     thickness?: Number;
     visible?: Boolean;
}

Sets or gets the pointer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
pointerGrabAction enum:KnobPointerGrabAction "normal"
enum KnobPointerGrabAction {
     normal,
     progressBar,
     pointer
}

Sets or gets the pointerGrabAction property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [pointerGrabAction]="'normal'">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
rotation enum:KnobRotation "clockwise"
enum KnobRotation {
     clockwise,
     counterclockwise
}

Sets or gets the rotation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [rotation]="'counterclockwise'">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
startAngle Number 0

Sets or gets the startAngle property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
spinner KnobSpinner null
interface KnobSpinner {
     innerRadius?: Any;
     outerRadius?: Any;
     style?: Any;
     marks?: KnobMarks;
}
interface KnobMarks {
     colorProgress?: Any;
     colorRemaining?: Any;
     drawAboveProgressBar?: Boolean;
     minorInterval?: Number;
     majorInterval?: Number;
     majorSize?: String | Number;
     offset?: String;
     rotate?: Boolean;
     size?: String | Number;
     type?: KnobSpinnerMarksType;
     thickness?: Number;
     visible?: Boolean;
}

Sets or gets the spinner property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [spinner]="spinner">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
style KnobStyle null
interface KnobStyle {
     fill?: Any;
     stroke?: String;
     strokeWidth?: Number;
}

Sets or gets the style property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [style]='{ stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }'
            >
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
step Number 1

Sets or gets the step property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [step]="10">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
snapToStep Boolean true

Sets or gets the snapToStep property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [snapToStep]="false">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
value Number 0

Sets or gets the value property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
width String | Number 400

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer" [width]="500">
        </jqxKnob>
    `
})
 
export class AppComponent {
    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}

Events

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxKnob. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob (onChange)="Change($event)"
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer">
        </jqxKnob>
    `
})
 
export class AppComponent {
    Change(event: any): void 
    {
        // Do Something
    }

    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}

Methods

NameReturn TypeArguments
destroy Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer">
        </jqxKnob>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myKnob') myKnob: jqxKnobComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myKnob.destroy();
    }

    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}
val Number value: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKnob #myKnob 
            [value]="60" [min]="0" [max]="100" [startAngle]="120" [endAngle]="420" 
            [marks]="marks" [labels]="labels" [pointer]="pointer">
        </jqxKnob>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myKnob') myKnob: jqxKnobComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myKnob.val();
    }

    marks: any =
    {
        colorRemaining: { color: 'grey', border: 'grey' },
        colorProgress: { color: '#00a4e1', border: '#00a4e1' },
        type: 'line', offset: '71%', thickness: 3, size: '6%',
        majorSize: '9%', majorInterval: 10, minorInterval: 2
    };
    labels: any =
    {
        offset: '88%',
        step: 10,
        visible: true
    };
    pointer: any =
    {
        type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
        size: '59%', offset: '49%', thickness: 20
    };
}