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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

							

						

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

							

						

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

							

						

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

							

						

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

						

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

						

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

						

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