Knob

  • 1 minute(s) read

This widget displays a dial with a slider the user can move to change a parameter value.

Knob

When the slider is moved on the dial, the selected value is immediately sent to the remote product by updating the referenced configuration parameter.

This widget provides two different layouts you can use.

DASHED

SOLID

Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

Knob <knob-widget>

Color

The color used to render the widget elements.

Name: config.color

Type: STRING | Optional

Default Value: #3F51B5

[config]="{color: 'abc'}"

Default Value

The default value to use when displaying the widget.

Name: config.defaultValue

Type: INTEGER | Optional

[config]="{defaultValue: 123}"

Layout

The dial layout, which can be:  DASHED with a squared slider,  SOLID with a circular slider.

Name: config.layout

Type: ENUM | Optional

Values: DASHED, SOLID

Default Value: DASHED

[config]="{layout: 'DASHED'}"

Parameter

The configuration parameter whose value must be set.

Name: config.parameter

Type: CONFIGURATION_PARAMETER | Required

[config]="{parameter: 'paramName'}"

Ratain Last Value

The flag indicating whether the last value should be retained between navigations.

Name: config.retainLastValue

Type: BOOLEAN | Optional

Default Value: false

[config]="{retainLastValue: true}"

Ticks

The number of ticks within the DASHED dial.

Name: config.ticks

Type: INTEGER | Optional

Default Value: 50

[config]="{ticks: 123}"

Title

The title displayed on the top part of the widget box.

Name: title

Type: STRING | Optional

[title]="'Details'"

Unit

The alternative unit of measurement to be displayed next to the value.

Name: config.unit

Type: STRING | Optional

[config]="{unit: 'abc'}"

Rendering

CSS Class

The name(s) of the CSS class used to customize the widget layout.

Name: class

Type: STRING | Optional

class="my-custom-class"

Height

The height of the widget (e.g. 250px).

Name: config.height

Type: STRING | Optional

Default Value: 300px

[config]="{height: '250px'}"

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Name: *ngIf

Type: STRING | Optional

*ngIf="getUser().organizationId != null"