enum ComboBoxAnimationType {
     fade,
     slide,
     none
}

Sets or gets the animationType property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [animationType]="'fade'">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the autoComplete property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [autoComplete]="true">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the autoOpen property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [autoOpen]="true">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the autoItemsHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [autoItemsHeight]="true">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the autoDropDownHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [autoDropDownHeight]="true">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the closeDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [closeDelay]="2000">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the checkboxes property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [checkboxes]="true">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [disabled]="true">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the displayMember property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [displayMember]="'text'">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

enum ComboBoxDropDownHorizontalAlignment {
     left,
     right
}

Sets or gets the dropDownHorizontalAlignment property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [dropDownHorizontalAlignment]="'right'">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

enum ComboBoxDropDownVerticalAlignment {
     top,
     bottom
}

Sets or gets the dropDownVerticalAlignment property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [dropDownVerticalAlignment]="'top'">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the dropDownHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [dropDownHeight]="300">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the dropDownWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [dropDownWidth]="300">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the enableHover property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [enableHover]="false">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the enableSelection property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [enableSelection]="false">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the enableBrowserBoundsDetection property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [enableBrowserBoundsDetection]="true">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the itemHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [itemHeight]="25">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the multiSelect property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [multiSelect]="true">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the minLength property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [minLength]="2">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the openDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [openDelay]="2000">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the popupZIndex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [popupZIndex]="2000">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the placeHolder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [placeHolder]="'Text'">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the remoteAutoComplete property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [remoteAutoComplete]="true" [remoteAutoCompleteDelay]="200">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the remoteAutoCompleteDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [remoteAutoComplete]="true" [remoteAutoCompleteDelay]="200">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the renderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [renderer]="renderer">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the renderSelectedItem property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [renderSelectedItem]="renderSelectedItem">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [rtl]="true">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the selectedIndex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [selectedIndex]="0">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the showArrow property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [showArrow]="true">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the showCloseButtons property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [showCloseButtons]="true">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

enum ComboBoxSearchMode {
     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: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [searchMode]="'contains'">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the search property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [search]="search">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the source property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the scrollBarSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [scrollBarSize]="10">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

enum ComboBoxTemplate {
     default,
     primary,
     success,
     warning,
     danger,
     info
}

Sets or gets the template property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [template]="'success'">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [theme]="'energyblue'">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the validateSelection property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [validateSelection]="validateSelection">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the valueMember property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25" [valueMember]="'value'">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25">
        </jqxComboBox>
    `
})
 
export class AppComponent {
    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}

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

Code examples

Bind to the bindingComplete event of jqxComboBox.

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

Code examples

Bind to the checkChange event of jqxComboBox.

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

This event is triggered when the popup ListBox is closed.

Code examples

Bind to the close event of jqxComboBox.

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxComboBox.

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

This event is triggered when the popup ListBox is opened.

Code examples

Bind to the open event of jqxComboBox.

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

This event is triggered when the user selects an item.

Code examples

Bind to the select event of jqxComboBox.

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

This event is triggered when the user unselects an item.

Code examples

Bind to the unselect event of jqxComboBox.

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComboBox #myComboBox 
            [source]="countries" [width]="200" [height]="25">
        </jqxComboBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myComboBox') myComboBox: jqxComboBoxComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myComboBox.removeAt(0);
    }

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}
							
						

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

    countries: any[] = [
        { value: 'DE', label: 'Germany' },
        { value: 'UK', label: 'United Kingdom' },
        { value: 'US', label: 'United States' }
    ];
}