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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
    }

    
}
							
						

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
    }

    
}
							
						

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
    }

    
}
							
						

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
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}