Number Field

  • 1 minute(s) read
Prev Next

This field allows providing a numeric value as page input.

Number Field

Template Syntax

Below you can find some examples of how to use the component within a template.

Number field from 0 to 100, with increment step 10 and initial value 90.


<number-field name="quality"
              label="Quality"
              min="0"
              max="100"
              step="10"
              value="90"
              [mandatory]="true">
</number-field>

Component Reference

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

Number Field <number-field>

Label

The field label.

Name: label

Type: STRING | Optional

label="abc"

Label Position

The position of the label respect the number input field.

Name: labelPosition

Type: ENUM | Optional

Values: none, left, top

Default Value: left

labelPosition="none"

Mandatory

The flag indicating whether the field value is mandatory.

Name: mandatory

Type: BOOLEAN | Optional

[mandatory]="true"

Max

The field maximum valid value.

Name: max

Type: INTEGER | Optional

max="123"

Min

The field minimum valid value.

Name: min

Type: INTEGER | Optional

min="123"

Name

The name used to reference the input field.

Name: name

Type: STRING | Optional

name="abc"

Property

The name of the thing property used to save the input value (optional).

Name: property

Type: PROPERTY | Optional

property="propName"

Step

The minimum value increment step.

Name: step

Type: FLOAT | Optional

step="1.234"

Value

The initial value.

Name: value

Type: FLOAT | Optional

value="1.234"

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"

Visibility Condition

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

Name: *ngIf

Type: STRING | Optional

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