Properties

NameTypeDefault
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [disabled]="true">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
dropDownWidth String | Number null

Sets or gets the dropDownWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [dropDownWidth]="200">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
displayMember String ""

Sets or gets the displayMember property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [valueMember]="'CompanyId'" [displayMember]="'CompanyName'">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
height String | Number null

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
items Number 8

Sets or gets the items property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [items]="10">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
minLength Number 1

Sets or gets the minLength property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [minLength]="1">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
maxLength Number null

Sets or gets the maxLength property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [maxLength]="10">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
opened Boolean false

Sets or gets the opened property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [opened]="true">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
placeHolder String ""

Sets or gets the placeHolder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [placeHolder]="'Enter a Country'">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
popupZIndex Number 20000

Sets or gets the popupZIndex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [popupZIndex]="99999">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
query String ""

Sets or gets the query property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [query]="'item'">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
renderer (itemValue?: String, inputValue?: String) => String null

Sets or gets the renderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [renderer]="renderer">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
rtl Boolean false

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [rtl]="true">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
searchMode enum:InputSearchMode 'default'
enum InputSearchMode {
     none,
     contains,
     containsignorecase,
     equals,
     equalsignorecase,
     startswithignorecase,
     startswith,
     endswithignorecase,
     endswith
}

Sets or gets the searchMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [searchMode]="'startswithignorecase'">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
source Array<Any> []

Sets or gets the source property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
theme String ''

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [theme]="'energyblue'">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
valueMember String ""

Sets or gets the valueMember property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [valueMember]="'CompanyId'" [displayMember]="'CompanyName'">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
width String | Number null

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
value String | Number null

Sets or gets the value property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries" [value]="200">
        </jqxInput>
    `
})
 
export class AppComponent {
    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}

Events

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxInput. 

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

    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
close Event

This event is triggered when the auto-suggest popup is closed.

Code examples

Bind to the close event of jqxInput. 

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

    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
open Event

This event is triggered when the auto-suggest popup is opened.

Code examples

Bind to the open event of jqxInput. 

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

    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
select Event

This event is triggered when an item is selected from the auto-suggest popup.

Code examples

Bind to the select event of jqxInput. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput (onSelect)="Select($event)"
            [width]="200" [height]="25" [source]="countries">
        </jqxInput>
    `
})
 
export class AppComponent {
    Select(event: any): void 
    {
        // Do Something
    }

    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}

Methods

NameReturn TypeArguments
destroy Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries">
        </jqxInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myInput') myInput: jqxInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myInput.destroy();
    }

    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
focus Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries">
        </jqxInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myInput') myInput: jqxInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myInput.focus();
    }

    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
selectAll Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries">
        </jqxInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myInput') myInput: jqxInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myInput.selectAll();
    }

    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}
val String value: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxInput #myInput 
            [width]="200" [height]="25" [source]="countries">
        </jqxInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myInput') myInput: jqxInputComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myInput.val();
    }

    countries: string[] = new Array("USA", "Germany", "UK", "Russia");
}