Properties

NameTypeDefault
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [disabled]="true">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
decimalNotation enum:FormattedInputDecimalNotation "default"
enum FormattedInputDecimalNotation {
     default,
     exponential
}

Sets or gets the decimalNotation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [decimalNotation]="'exponential'">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
dropDown Boolean false

Sets or gets the dropDown property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [dropDown]="true">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
dropDownWidth Number | String null

Sets or gets the dropDownWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [dropDownWidth]="200">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
height Number | String null

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
min Number | String '-9223372036854775808'

Sets or gets the min property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [min]="0">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
max Number | String '9223372036854775807'

Sets or gets the max property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [max]="111110100">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
placeHolder String ''

Sets or gets the placeHolder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [placeHolder]="'Enter a number'">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
popupZIndex Number 20000

Sets or gets the popupZIndex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [popupZIndex]="99999">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
roundedCorners Boolean true

Sets or gets the roundedCorners property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [roundedCorners]="true">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
rtl Boolean false

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [rtl]="true">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
radix Number | String 10

Sets or gets the radix property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [radix]="'hexadecimal'">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
spinButtons Boolean true

Sets or gets the spinButtons property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [spinButtons]="true">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
spinButtonsStep Number 1

Sets or gets the spinButtonsStep property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [spinButtons]="true" [spinButtonsStep]="3">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
template enum:FormattedInputTemplate 'default'
enum FormattedInputTemplate {
     default,
     primary,
     success,
     warning,
     danger,
     info
}

Sets or gets the template property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [template]="'primary'">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
theme String ''

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [theme]="'energyblue'">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
upperCase Boolean false

Sets or gets the upperCase property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [upperCase]="true">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
value String '0'

Sets or gets the value property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25" [value]="0">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}
width Number | String null

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    
}

Events

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxFormattedInput. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput (onChange)="Change($event)"
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    Change(event: any): void 
    {
        // Do Something
    }

    
}
close Event

This event is triggered when the pop-up is closed.

Code examples

Bind to the close event of jqxFormattedInput. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput (onClose)="Close($event)"
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    Close(event: any): void 
    {
        // Do Something
    }

    
}
open Event

This event is triggered when the pop-up is opened.

Code examples

Bind to the open event of jqxFormattedInput. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput (onOpen)="Open($event)"
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    Open(event: any): void 
    {
        // Do Something
    }

    
}
radixChange Event

This event is triggered when the radix is changed.

Code examples

Bind to the radixChange event of jqxFormattedInput. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput (onRadixChange)="RadixChange($event)"
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent {
    RadixChange(event: any): void 
    {
        // Do Something
    }

    
}

Methods

NameReturn TypeArguments
close Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFormattedInput') myFormattedInput: jqxFormattedInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFormattedInput.close();
    }

    
}
destroy Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFormattedInput') myFormattedInput: jqxFormattedInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFormattedInput.destroy();
    }

    
}
focus Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFormattedInput') myFormattedInput: jqxFormattedInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFormattedInput.focus();
    }

    
}
open Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFormattedInput') myFormattedInput: jqxFormattedInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFormattedInput.open();
    }

    
}
render Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFormattedInput') myFormattedInput: jqxFormattedInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFormattedInput.render();
    }

    
}
refresh Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFormattedInput') myFormattedInput: jqxFormattedInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFormattedInput.refresh();
    }

    
}
selectAll Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFormattedInput') myFormattedInput: jqxFormattedInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFormattedInput.selectAll();
    }

    
}
selectFirst Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFormattedInput') myFormattedInput: jqxFormattedInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFormattedInput.selectFirst();
    }

    
}
selectLast Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFormattedInput') myFormattedInput: jqxFormattedInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFormattedInput.selectLast();
    }

    
}
val Any value: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFormattedInput #myFormattedInput 
            [width]="250" [height]="25">
        </jqxFormattedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFormattedInput') myFormattedInput: jqxFormattedInputComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myFormattedInput.val();
    }

    
}