Properties

NameTypeDefault
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 {
    
}

Events

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
    }

    
}

Methods

NameReturn TypeArguments
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);
    }

    
}