Properties

NameTypeDefault
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21" [disabled]="true">
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
height String | Number "auto"

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21">
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
localization PasswordInputLocalization { passwordStrengthString: 'Password strength', tooShort: 'Too short', weak: 'Weak', fair: 'Fair', good: 'Good', strong: 'Strong' }
interface PasswordInputLocalization {
     passwordStrengthString?: String;
     tooShort?: String;
     weak?: String;
     fair?: String;
     good?: String;
     strong?: String;
}

Sets or gets the localization property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21" [localization]="localization">
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
maxLength String | Number null

Sets or gets the maxLength property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21" [maxLength]="7">
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
placeHolder String | Number null

Sets or gets the placeHolder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21" [placeHolder]="'Enter a Password'">
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
passwordStrength (password:String | Number, characters:Any, defaultStrength:String) => String null

Sets or gets the passwordStrength property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21" [passwordStrength]="passwordStrength">
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
rtl Boolean false

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21" [rtl]="true">
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
strengthColors PasswordInputStrengthColors { tooShort: 'rgb(170, 0, 51)', weak: 'rgb(170, 0, 51)', fair: 'rgb(255, 204, 51)', good: 'rgb(45, 152, 243)', strong: 'rgb(118, 194, 97)' }
interface PasswordInputStrengthColors {
     tooShort?: String;
     weak?: String;
     fair?: String;
     good?: String;
     strong?: String;
}

Sets or gets the strengthColors property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21" [showStrength]="true" [strengthColors]='{ tooShort: "Red", weak: "Red", fair: "Yellow", good: "Blue", strong: "Green" }'
            >
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
showStrength Boolean true

Sets or gets the showStrength property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21" [showStrength]="true">
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
showStrengthPosition enum:PasswordInputShowStrengthPosition "right"
enum PasswordInputShowStrengthPosition {
     left,
     right,
     top,
     bottom
}

Sets or gets the showStrengthPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21" [showStrength]="true" [showStrengthPosition]="'left'">
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
strengthTypeRenderer (password:String | Number, characters:Any, defaultStrength:String) => String null

Sets or gets the strengthTypeRenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21" [strengthTypeRenderer]="strengthTypeRenderer">
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
showPasswordIcon Boolean true

Sets or gets the showPasswordIcon property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21" [showPasswordIcon]="false">
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
theme String ''

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21" [theme]="'energyblue'">
        </jqxPasswordInput>
    `
})
 
export class AppComponent {
    
}
width String | Number "auto"

Sets or gets the width property.

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

Events

change Event

This event is triggered when the value in the input is changed.

Code examples

Bind to the change event of jqxPasswordInput. 

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

    
}

Methods

NameReturn TypeArguments
render Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21">
        </jqxPasswordInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myPasswordInput') myPasswordInput: jqxPasswordInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myPasswordInput.render();
    }

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

    
}
val String value: String 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxPasswordInput #myPasswordInput 
            [width]="300" [height]="21">
        </jqxPasswordInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myPasswordInput') myPasswordInput: jqxPasswordInputComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myPasswordInput.val();
    }

    
}