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.

Type: STRING | Optional

Default Value: #3F51B5

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

Default Value

The default value to use when displaying the widget.

Type: INTEGER | Optional

[config]="{defaultValue: 123}"

Layout

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

Type: ENUM | Optional

Values: DASHED, SOLID

Default Value: DASHED

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

Parameter

The configuration parameter whose value must be set.

Type: CONFIGURATION_PARAMETER | Required

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

Ratain Last Value

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

Type: BOOLEAN | Optional

Default Value: false

[config]="{retainLastValue: true}"

Ticks

The number of ticks within the DASHED dial.

Type: INTEGER | Optional

Default Value: 50

[config]="{ticks: 123}"

Title

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

Type: STRING | Optional

[title]="'Details'"

Unit

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

Type: STRING | Optional

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

Rendering

CSS Class

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

Type: STRING | Optional

class="my-custom-class"

Height

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

Type: STRING | Optional

Default Value: 300px

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

Visibility Condition

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

Type: STRING | Optional

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