NumericTextBoxModel API in Angular NumericTextBox API component

Interface for a class NumericTextBox

Properties

blur

EmitType<NumericBlurEventArgs>

Triggers when the NumericTextBox got focus out.

change

EmitType<ChangeEventArgs>

Triggers when the value of the NumericTextBox changes.

created

EmitType<Object>

Triggers when the NumericTextBox component is created.

destroyed

EmitType<Object>

Triggers when the NumericTextBox component is destroyed.

focus

EmitType<NumericFocusEventArgs>

Triggers when the NumericTextBox got focus in.

cssClass

string

Gets or Sets the CSS classes to root element of the NumericTextBox which helps to customize the complete UI styles for the NumericTextBox component.

currency

string

Specifies the currency code to use in currency formatting. Possible values are the ISO 4217 currency codes, such as ‘USD’ for the US dollar,‘EUR’ for the euro.

decimals

number

Specifies the number precision applied to the textbox value when the NumericTextBox is focused. For more information on decimals, refer to decimals.

enablePersistence

boolean

Enable or disable persisting NumericTextBox state between page reloads. If enabled, the value state will be persisted.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enabled

boolean

Sets a value that enables or disables the NumericTextBox control.

floatLabelType

FloatLabelType

The placeholder acts as a label and floats above the NumericTextBox based on the below values. Possible values are:

• Never - Never floats the label in the NumericTextBox when the placeholder is available.
• Always - The floating label always floats above the NumericTextBox.
• Auto - The floating label floats above the NumericTextBox after focusing it or when enters the value in it.

format

string

Specifies the number format that indicates the display format for the value of the NumericTextBox. For more information on formats, refer to formats.

htmlAttributes

{ [key: string]: string }

You can add the additional html attributes such as disabled, value etc., to the element. If you configured both property and equivalent html attribute then the component considers the property value.

<ejs-numerictextbox [htmlAttributes]="htmlAttributes"></ejs-numerictextbox>

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  constructor() { }
  public htmlAttributes = { name: "quantity", min: "0", max:"100" };
}

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

max

number

Specifies a maximum value that is allowed a user can enter. For more information on max, refer to max.

min

number

Specifies a minimum value that is allowed a user can enter. For more information on min, refer to min.

placeholder

string

Gets or sets the string shown as a hint/placeholder when the NumericTextBox is empty. It acts as a label and floats above the NumericTextBox based on the floatLabelType.

readonly

boolean

Sets a value that enables or disables the readonly state on the NumericTextBox. If it is true, NumericTextBox will not allow your input.

showClearButton

boolean

Specifies whether to show or hide the clear icon.

showSpinButton

boolean

Specifies whether the up and down spin buttons should be displayed in NumericTextBox.

step

number

Specifies the incremental or decremental step size for the NumericTextBox. For more information on step, refer to step.

strictMode

boolean

Specifies a value that indicates whether the NumericTextBox control allows the value for the specified range. If it is true, the input value will be restricted between the min and max range. The typed value gets modified to fit the range on focused out state. Else, it allows any value even out of range value, At that time of wrong value entered, the error class will be added to the component to highlight the error.

<ejs-numerictextbox [strictMode]="false" min="10" max="20" value="25"></ejs-numerictextbox>

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  constructor() { }
}

validateDecimalOnType

boolean

Specifies whether the decimals length should be restricted during typing.

value

number

Sets the value of the NumericTextBox.

width

number | string

Specifies the width of the NumericTextBox.