| Name | Type | Default |
|---|
|
allowNull
|
Boolean
|
true
|
Sets or gets the allowNull property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [allowNull]="true">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
decimal
|
String | Number
|
0
|
Sets or gets the decimal property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [decimal]="2">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [disabled]="true">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
decimalDigits
|
String | Number
|
2
|
Sets or gets the decimalDigits property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [decimalDigits]="3">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
decimalSeparator
|
String | Number
|
'.'
|
Sets or gets the decimalSeparator property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [decimalSeparator]=",">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
digits
|
String | Number
|
8
|
Sets or gets the digits property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [digits]="8">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
groupSeparator
|
String
|
','
|
Sets or gets the groupSeparator property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [groupSeparator]=".">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
groupSize
|
String | Number
|
3
|
Sets or gets the groupSize property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [groupSize]="2">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
height
|
String | Number
|
null
|
Sets or gets the height property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
inputMode
|
enum:NumberInputMode
|
'advanced'
|
enum NumberInputMode { advanced, simple } Sets or gets the inputMode property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [inputMode]="'simple'">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
min
|
String | Number
|
-99999999
|
Sets or gets the min property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [min]="2">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
max
|
String | Number
|
99999999
|
Sets or gets the max property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [max]="50">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
negativeSymbol
|
String
|
'-'
|
Sets or gets the negativeSymbol property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [negativeSymbol]="-">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
placeHolder
|
String | Number
|
""
|
Sets or gets the placeHolder property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [placeHolder]="'Null Value'">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
promptChar
|
enum:NumberInputPromptChar
|
-
|
enum NumberInputPromptChar { _, ?, ;, # } Sets or gets the promptChar property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [promptChar]="#">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [rtl]="true">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
readOnly
|
Boolean
|
false
|
Sets or gets the readOnly property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [readOnly]="true">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
spinMode
|
enum:NumberInputMode
|
'advanced'
|
enum NumberInputMode { advanced, simple } Sets or gets the spinMode property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [spinMode]="'advanced'">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
spinButtons
|
Boolean
|
false
|
Sets or gets the spinButtons property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [spinButtons]="true">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
spinButtonsWidth
|
Number
|
18
|
Sets or gets the spinButtonsWidth property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [spinButtons]="true" [spinButtonsWidth]="30">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
spinButtonsStep
|
String | Number
|
1
|
Sets or gets the spinButtonsStep property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [spinButtons]="true" [spinButtonsStep]="10">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
symbol
|
String
|
''
|
Sets or gets the symbol property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [symbol]="$">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
symbolPosition
|
enum:NumberInputSymbolPosition
|
'left'
|
enum NumberInputSymbolPosition { left, right } Sets or gets the symbolPosition property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [symbol]="$" [symbolPosition]="'right'">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
textAlign
|
enum:NumberInputTextAlign
|
'right'
|
enum NumberInputTextAlign { left, right, center } Sets or gets the textAlign property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [textAlign]="'right'">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
template
|
enum:NumberInputTemplate
|
'default'
|
enum NumberInputTemplate { default, primary, success, warning, danger, info } Sets or gets the template property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [template]="'success'">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [theme]="'energyblue'">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
value
|
String | Number
|
null
|
Sets or gets the value property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25" [value]="100">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
width
|
String | Number
|
null
|
Sets or gets the width property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25">
</jqxNumberInput>
`
})
export class AppComponent {
}
|
|
|
|
change
|
Event
|
|
This event is triggered when the value is changed and the control's focus is lost.
Code examples
Bind to the change event of jqxNumberInput.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput (onChange)="Change($event)"
[width]="250" [height]="25">
</jqxNumberInput>
`
})
export class AppComponent {
Change(event: any): void
{
// Do Something
}
}
|
|
textchanged
|
Event
|
|
This event is triggered when the user entered entered a text.
Code examples
Bind to the textchanged event of jqxNumberInput.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput (onTextchanged)="Textchanged($event)"
[width]="250" [height]="25">
</jqxNumberInput>
`
})
export class AppComponent {
Textchanged(event: any): void
{
// Do Something
}
}
|
|
valueChanged
|
Event
|
|
This event is triggered after value is changed.
Code examples
Bind to the valueChanged event of jqxNumberInput.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput (onValueChanged)="ValueChanged($event)"
[width]="250" [height]="25">
</jqxNumberInput>
`
})
export class AppComponent {
ValueChanged(event: any): void
{
// Do Something
}
}
|
|
|
| Name | Return Type | Arguments |
|---|
|
clear
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25">
</jqxNumberInput>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNumberInput') myNumberInput: jqxNumberInputComponent;
ngAfterViewInit(): void
{
this.myNumberInput.clear();
}
}
|
|
destroy
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25">
</jqxNumberInput>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNumberInput') myNumberInput: jqxNumberInputComponent;
ngAfterViewInit(): void
{
this.myNumberInput.destroy();
}
}
|
|
focus
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25">
</jqxNumberInput>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNumberInput') myNumberInput: jqxNumberInputComponent;
ngAfterViewInit(): void
{
this.myNumberInput.focus();
}
}
|
|
getDecimal
|
Number
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25">
</jqxNumberInput>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNumberInput') myNumberInput: jqxNumberInputComponent;
ngAfterViewInit(): void
{
let value = this.myNumberInput.getDecimal();
}
}
|
|
setDecimal
|
Void
|
index: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25">
</jqxNumberInput>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNumberInput') myNumberInput: jqxNumberInputComponent;
ngAfterViewInit(): void
{
this.myNumberInput.setDecimal(1);
}
}
|
|
val
|
Number
|
value: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNumberInput #myNumberInput
[width]="250" [height]="25">
</jqxNumberInput>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNumberInput') myNumberInput: jqxNumberInputComponent;
ngAfterViewInit(): void
{
let value = this.myNumberInput.val(12);
}
}
|