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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

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
    };
}

							

						

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
    };
}
							

						

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
    };
}