WjInputNumber Class

File
wijmo.angular2.js
Module
wijmo/wijmo.angular2.input
Base Class
InputNumber
Show
   

Angular 2 component for the InputNumber control.

Use the wj-input-number component to add InputNumber controls to your Angular 2 applications. For details about Angular 2 markup syntax, see Angular 2 Markup.

The WjInputNumber component is derived from the InputNumber control and inherits all its properties, events and methods.

Constructor

Properties

Methods

Events

Constructor

constructor

constructor(element: any, options?): InputNumber

Initializes a new instance of the InputNumber class.

Parameters
Inherited From
InputNumber
Returns
InputNumber

Properties

Static controlTemplate

Gets or sets the template used to instantiate InputNumber controls.

Inherited From
InputNumber
Type
any

format

Gets or sets the format used to display the number being edited (see Globalize).

The format string is expressed as a .NET-style standard numeric format string.

Inherited From
InputNumber
Type
string

gotFocusNg

Angular (EventEmitter) version of the Wijmo gotFocus event for programmatic access. Use this event name if you want to subscribe to the Angular version of the event in code. In template bindings use the conventional gotFocus Wijmo event name.

Type
EventEmitter

hostElement

Gets the DOM element that is hosting the control.

Inherited From
Control
Type
HTMLElement

initialized

This event is triggered after the component has been initialized by Angular, that is all bound properties have been assigned and child components (if any) have been initialized.

Type
EventEmitter

inputElement

Gets the HTML input element hosted by the control.

Use this property in situations where you want to customize the attributes of the input element.

Inherited From
InputNumber
Type
HTMLInputElement

inputType

Gets or sets the "type" attribute of the HTML input element hosted by the control.

By default, this property is set to "tel", a value that causes mobile devices to show a numeric keypad that includes a negative sign and a decimal separator.

Use this property to change the default setting if the default does not work well for the current culture, device, or application. In those cases, try changing the value to "number" or "text."

Note that input elements with type "number" prevent selection in Chrome and therefore is not recommended. For more details, see this link: http://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome

Inherited From
InputNumber
Type
string

isDisabled

Gets or sets a value that determines whether the control is disabled.

Disabled controls cannot get mouse or keyboard events.

Inherited From
Control
Type
boolean

isInitialized

Indicates whether the component has been initialized by Angular. Changes its value from false to true right before triggering the initialized event.

Type
boolean

isReadOnly

Gets or sets a value that indicates whether the user can modify the control value using the mouse and keyboard.

Inherited From
InputNumber
Type
boolean

isRequired

Gets or sets a value indicating whether the control value must be a number or whether it can be set to null (by deleting the content of the control).

Inherited From
InputNumber
Type
boolean

isTouching

Gets a value that indicates whether the control is currently handling a touch event.

Inherited From
Control
Type
boolean

isUpdating

Gets a value that indicates whether the control is currently being updated.

Inherited From
Control
Type
boolean

lostFocusNg

Angular (EventEmitter) version of the Wijmo lostFocus event for programmatic access. Use this event name if you want to subscribe to the Angular version of the event in code. In template bindings use the conventional lostFocus Wijmo event name.

Type
EventEmitter

max

Gets or sets the largest number that the user can enter.

For details about using the min and max properties, please see the Using the min and max properties topic.

Inherited From
InputNumber
Type
number

min

Gets or sets the smallest number that the user can enter.

For details about using the min and max properties, please see the Using the min and max properties topic.

Inherited From
InputNumber
Type
number

placeholder

Gets or sets the string shown as a hint when the control is empty.

Inherited From
InputNumber
Type
string

rightToLeft

Gets a value indicating whether the control is hosted in an element with right-to-left layout.

Inherited From
Control
Type
boolean

showSpinner

Gets or sets a value indicating whether the control displays spinner buttons to increment or decrement the value (the step property must be set to a value other than zero).

Inherited From
InputNumber
Type
boolean

step

Gets or sets the amount to add or subtract to the value property when the user clicks the spinner buttons.

Inherited From
InputNumber
Type
number

text

Gets or sets the text shown in the control.

Inherited From
InputNumber
Type
string

textChangedNg

Angular (EventEmitter) version of the Wijmo textChanged event for programmatic access. Use this event name if you want to subscribe to the Angular version of the event in code. In template bindings use the conventional textChanged Wijmo event name.

Type
EventEmitter

value

Gets or sets the current value of the control.

Inherited From
InputNumber
Type
number

valueChangedNg

Angular (EventEmitter) version of the Wijmo valueChanged event for programmatic access. Use this event name if you want to subscribe to the Angular version of the event in code. In template bindings use the conventional valueChanged Wijmo event name.

Type
EventEmitter

wjModelProperty

Defines a name of a property represented by [(ngModel)] directive (if specified). Default value is 'value'.

Type
string

Methods

addEventListener

addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean): void

Adds an event listener to an element owned by this Control.

The control keeps a list of attached listeners and their handlers, making it easier to remove them when the control is disposed (see the dispose and removeEventListener method).

Failing to remove event listeners may cause memory leaks.

Parameters
Inherited From
Control
Returns
void

applyTemplate

applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement

Applies the template to a new instance of a control, and returns the root element.

This method should be called by constructors of templated controls. It is responsible for binding the template parts to the corresponding control members.

For example, the code below applies a template to an instance of an InputNumber control. The template must contain elements with the 'wj-part' attribute set to 'input', 'btn-inc', and 'btn-dec'. The control members '_tbx', '_btnUp', and '_btnDn' will be assigned references to these elements.

this.applyTemplate('wj-control wj-inputnumber', template, {
  _tbx: 'input',
  _btnUp: 'btn-inc',
  _btnDn: 'btn-dec'
}, 'input');
Parameters
Inherited From
Control
Returns
HTMLElement

beginUpdate

beginUpdate(): void

Suspends notifications until the next call to endUpdate.

Inherited From
Control
Returns
void

containsFocus

containsFocus(): boolean

Checks whether this control contains the focused element.

Inherited From
Control
Returns
boolean

created

created(): void

If you create a custom component inherited from a Wijmo component, you can override this method and perform necessary initializations that you usually do in a class constructor. This method is called in the last line of a Wijmo component constructor and allows you to not declare your custom component's constructor at all, thus preventing you from a necessity to maintain constructor parameters and keep them in synch with Wijmo component's constructor parameters.

Returns
void

deferUpdate

deferUpdate(fn: Function): void

Executes a function within a beginUpdate/endUpdate block.

The control will not be updated until the function has been executed. This method ensures endUpdate is called even if the function throws an exception.

Parameters
Inherited From
Control
Returns
void

dispose

dispose(): void

Disposes of the control by removing its association with the host element.

The dispose method automatically removes any event listeners added with the addEventListener method.

Calling the dispose method is important in applications that create and remove controls dynamically. Failing to dispose of the controls may cause memory leaks.

Inherited From
Control
Returns
void

Static disposeAll

disposeAll(e?: HTMLElement): void

Disposes of all Wijmo controls contained in an HTML element.

Parameters
Inherited From
Control
Returns
void

endUpdate

endUpdate(): void

Resumes notifications suspended by calls to beginUpdate.

Inherited From
Control
Returns
void

focus

focus(): void

Sets the focus to this control.

Inherited From
Control
Returns
void

Static getControl

getControl(element: any): Control

Gets the control that is hosted in a given DOM element.

Parameters
Inherited From
Control
Returns
Control

getTemplate

getTemplate(): string

Gets the HTML template used to create instances of the control.

This method traverses up the class hierarchy to find the nearest ancestor that specifies a control template. For example, if you specify a prototype for the ComboBox control, it will override the template defined by the DropDown base class.

Inherited From
Control
Returns
string

initialize

initialize(options: any): void

Initializes the control by copying the properties from a given object.

This method allows you to initialize controls using plain data objects instead of setting the value of each property in code.

For example:

grid.initialize({
  itemsSource: myList,
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: 'Code', width: 130 },
    { binding: 'name', header: 'Name', width: 60 } 
  ]
});

// is equivalent to
grid.itemsSource = myList;
grid.autoGenerateColumns = false;

// etc.

The initialization data is type-checked as it is applied. If the initialization object contains unknown property names or invalid data types, this method will throw.

Parameters
Inherited From
Control
Returns
void

invalidate

invalidate(fullUpdate?: boolean): void

Invalidates the control causing an asynchronous refresh.

Parameters
Inherited From
Control
Returns
void

Static invalidateAll

invalidateAll(e?: HTMLElement): void

Invalidates all Wijmo controls contained in an HTML element.

Use this method when your application has dynamic panels that change the control's visibility or dimensions. For example, splitters, accordions, and tab controls usually change the visibility of its content elements. In this case, failing to notify the controls contained in the element may cause them to stop working properly.

If this happens, you must handle the appropriate event in the dynamic container and call the invalidateAll method so the contained Wijmo controls will update their layout information properly.

Parameters
Inherited From
Control
Returns
void

onGotFocus

onGotFocus(e?: EventArgs): void

Raises the gotFocus event.

Parameters
Inherited From
Control
Returns
void

onLostFocus

onLostFocus(e?: EventArgs): void

Raises the lostFocus event.

Parameters
Inherited From
Control
Returns
void

onTextChanged

onTextChanged(e?: EventArgs): void

Raises the textChanged event.

Parameters
Inherited From
InputNumber
Returns
void

onValueChanged

onValueChanged(e?: EventArgs): void

Raises the valueChanged event.

Parameters
Inherited From
InputNumber
Returns
void

refresh

refresh(fullUpdate?: boolean): void

Refreshes the control.

Parameters
Inherited From
Control
Returns
void

Static refreshAll

refreshAll(e?: HTMLElement): void

Refreshes all Wijmo controls contained in an HTML element.

This method is similar to invalidateAll, except the controls are updated immediately rather than after an interval.

Parameters
Inherited From
Control
Returns
void

removeEventListener

removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number

Removes one or more event listeners attached to elements owned by this Control.

Parameters
Inherited From
Control
Returns
number

selectAll

selectAll(): void

Sets the focus to the control and selects all its content.

Inherited From
InputNumber
Returns
void

Events

gotFocus

Occurs when the control gets the focus.

Inherited From
Control
Arguments
EventArgs

lostFocus

Occurs when the control loses the focus.

Inherited From
Control
Arguments
EventArgs

textChanged

Occurs when the value of the text property changes.

Inherited From
InputNumber
Arguments
EventArgs

valueChanged

Occurs when the value of the value property changes, either as a result of user actions or by assignment in code.

Inherited From
InputNumber
Arguments
EventArgs