Sets or gets the disabled property.

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

Sets or gets the height property.

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

Sets or gets the mask property.

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

Sets or gets the promptChar property.

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

Sets or gets the readOnly property.

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

Sets or gets the rtl property.

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

Sets or gets the theme property.

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

enum MaskedInputTextAlign {
     left,
     right
}

Sets or gets the textAlign property.

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

Sets or gets the value property.

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

Sets or gets the width property.

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

This event is triggered when the value is changed and the control's focus is lost.

Code examples

Bind to the change event of jqxMaskedInput.

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

    
}

							

						

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxMaskedInput.

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

    
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMaskedInput #myMaskedInput 
            [width]="250" [height]="25">
        </jqxMaskedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMaskedInput') myMaskedInput: jqxMaskedInputComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myMaskedInput.clear();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMaskedInput #myMaskedInput 
            [width]="250" [height]="25">
        </jqxMaskedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMaskedInput') myMaskedInput: jqxMaskedInputComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myMaskedInput.destroy();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMaskedInput #myMaskedInput 
            [width]="250" [height]="25">
        </jqxMaskedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMaskedInput') myMaskedInput: jqxMaskedInputComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myMaskedInput.focus();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMaskedInput #myMaskedInput 
            [width]="250" [height]="25">
        </jqxMaskedInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMaskedInput') myMaskedInput: jqxMaskedInputComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myMaskedInput.val();
    }

    
}