Sets or gets the autoOpen property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [autoOpen]="true">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the autoDropDownHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [autoDropDownHeight]="true">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

enum DropDownListAnimationType {
     none,
     slide,
     fade
}

Sets or gets the animationType property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [animationType]="'fade'">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the checkboxes property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [checkboxes]="true">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the closeDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [closeDelay]="200">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [disabled]="true">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the displayMember property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [valueMember]="'value'" [displayMemer]="'label'">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

enum DropDownListHorizontalAlignment {
     left,
     right
}

Sets or gets the dropDownHorizontalAlignment property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [dropDownHorizontalAlignment]="'right'">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

enum DropDownListVerticalAlignment {
     bottom,
     top
}

Sets or gets the dropDownVerticalAlignment property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [dropDownVerticalAlignment]="'top'">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the dropDownHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [dropDownHeight]="200">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the dropDownWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [dropDownWidth]="210">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the enableSelection property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [enableSelection]="true">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the enableBrowserBoundsDetection property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [enableBrowserBoundsDetection]="true">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the enableHover property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [enableHover]="true">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the filterable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [filterable]="true">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the filterHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [filterHeight]="30" [filterable]="true">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the filterDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [filterDelay]="200" [filterable]="true">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the filterPlaceHolder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [filterable]="true" [filterPlaceHolder]="'Filtering...'">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the incrementalSearch property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [incrementalSearch]="false">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the incrementalSearchDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [incrementalSearchDelay]="200">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the itemHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [itemHeight]="30">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the openDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [openDelay]="2000">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the placeHolder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [placeHolder]="'Select'">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the popupZIndex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [popupZIndex]="20000">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [rtl]="true">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the renderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [renderer]="renderer">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the selectionRenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [selectionRenderer]="selectionRenderer">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

enum DropDownListSearchMode {
     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: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [searchMode]="'startswith'">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the scrollBarSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [scrollBarSize]="15">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the source property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the selectedIndex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [theme]="'energyblue'">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the template property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [template]="'success'">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the valueMember property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1" [valueMember]="'value'" [displayMemer]="'label'">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

This event is triggered when the data binding operation is completed.

Code examples

Bind to the bindingComplete event of jqxDropDownList.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList (onBindingComplete)="BindingComplete($event)"
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    BindingComplete(event: any): void 
    {
        // Do Something
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

This event is triggered when the popup ListBox is closed.

Code examples

Bind to the close event of jqxDropDownList.

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

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

This event is triggered when an item is checked/unchecked.

Code examples

Bind to the checkChange event of jqxDropDownList.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList (onCheckChange)="CheckChange($event)"
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    CheckChange(event: any): void 
    {
        // Do Something
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxDropDownList.

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

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

This event is triggered when the popup ListBox is opened.

Code examples

Bind to the open event of jqxDropDownList.

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

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

This event is triggered when the user selects an item.

Code examples

Bind to the select event of jqxDropDownList.

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

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

This event is triggered when the user unselects an item.

Code examples

Bind to the unselect event of jqxDropDownList.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList (onUnselect)="Unselect($event)"
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent {
    Unselect(event: any): void 
    {
        // Do Something
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myDropDownList.addItem('Item1');
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.clearSelection();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.clear();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.close();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.checkIndex(0);
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.checkItem('Item1');
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.checkAll();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.clearFilter();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.destroy();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.disableItem('Item1');
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.disableAt(0);
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.enableItem('Item1');
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.enableAt(10);
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.ensureVisible(10);
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.focus();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

interface DropDownListItem {
     label?: String;
     value?: Any;
     disabled?: Boolean;
     checked?: Any;
     hasThreeStates?: Boolean;
     html?: String;
     group?: String;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myDropDownList.getItem();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

interface DropDownListItem {
     label?: String;
     value?: Any;
     disabled?: Boolean;
     checked?: Any;
     hasThreeStates?: Boolean;
     html?: String;
     group?: String;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myDropDownList.getItemByValue();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

interface DropDownListItem {
     label?: String;
     value?: Any;
     disabled?: Boolean;
     checked?: Any;
     hasThreeStates?: Boolean;
     html?: String;
     group?: String;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myDropDownList.getItems();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

interface DropDownListItem {
     label?: String;
     value?: Any;
     disabled?: Boolean;
     checked?: Any;
     hasThreeStates?: Boolean;
     html?: String;
     group?: String;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myDropDownList.getCheckedItems();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

interface DropDownListItem {
     label?: String;
     value?: Any;
     disabled?: Boolean;
     checked?: Any;
     hasThreeStates?: Boolean;
     html?: String;
     group?: String;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myDropDownList.getSelectedItem();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myDropDownList.getSelectedIndex();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.insertAt('Item1',0);
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myDropDownList.isOpened();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.indeterminateIndex(0);
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.indeterminateItem('Item1');
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.loadFromSelect('select');
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.open();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.removeItem('Item1');
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.removeAt(1);
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.selectIndex(1);
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.selectItem('Item1');
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.setContent('Item1');
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.updateItem('Item1','New Item');
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.updateAt('Item1',0);
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.unselectIndex(1);
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.unselectItem('item');
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.uncheckIndex(1);
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.uncheckItem('Item1');
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDropDownList.uncheckAll();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDropDownList #myDropDownList 
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myDropDownList.val();
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}