Angular UI Components Documentation

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
    }

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}