Sets or gets the autoHeight property.

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

Sets or gets the allowDrag property.

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

Sets or gets the allowDrop property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [allowDrop]="true">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [checkboxes]="true">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [disabled]="true">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [displayMember]="'text'">
        </jqxListBox>
    `
})
 
export class AppComponent {
    source: string[] = 
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

enum ListBoxDropAction {
     default,
     copy,
     none
}

Sets or gets the dropAction property.

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

Sets or gets the dragStart property.

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

Sets or gets the dragEnd property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [dragEnd]="dragEnd">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [enableHover]="false">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [enableSelection]="false">
        </jqxListBox>
    `
})
 
export class AppComponent {
    source: string[] = 
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the equalItemsWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [equalItemsWidth]="false">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [filterable]="true">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [filterable]="true" [filterHeight]="30">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [filterable]="true" [filterDelay]="300">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [filterable]="true" [filterPlaceHolder]="'Filtering...'">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent {
    source: string[] = 
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the hasThreeStates property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [hasThreeStates]="true">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [itemHeight]="30">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [incrementalSearch]="false">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [incrementalSearchDelay]="150">
        </jqxListBox>
    `
})
 
export class AppComponent {
    source: string[] = 
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the multiple property.

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

Sets or gets the multipleextended property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [multipleextended]="true">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [renderer]="renderer">
        </jqxListBox>
    `
})
 
export class AppComponent {
    source: string[] = 
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the rendered property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [rendered]="rendered">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [rtl]="true">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [selectedIndex]="2">
        </jqxListBox>
    `
})
 
export class AppComponent {
    source: string[] = 
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Sets or gets the selectedIndexes property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [selectedIndex]="selectedIndex">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [scrollBarSize]="15">
        </jqxListBox>
    `
})
 
export class AppComponent {
    source: string[] = 
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

enum ListBoxSearchMode {
     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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [searchMode]="'startswithignorecase'">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [theme]="'energyblue'">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source" [valueMember]="'value'">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent {
    source: string[] = 
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

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

Code example

Bind to the bindingComplete event by type: jqxListBox.

Code examples

Bind to the bindingComplete event of jqxListBox.

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

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

							

						

This event is triggered when the user selects an item.

Code example

Bind to the change by type: jqxListBox.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code examples

Bind to the change event of jqxListBox.

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

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

							

						

This event is triggered when the user checks or unchecks an item.

Code example

Bind to the checkChange event by type: jqxListBox.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code examples

Bind to the checkChange event of jqxListBox.

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

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

							

						

This event is triggered when the user starts a drag operation.

Code example

Bind to the dragStart event by type: jqxListBox.

Code examples

Bind to the dragStart event of jqxListBox.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox (onDragStart)="DragStart($event)"
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent {
    DragStart(event: any): void 
    {
        // Do Something
    }

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

							

						

This event is triggered when the user drops an item.

Code example

Bind to the dragdragEndnd event by type: jqxListBox.

Code examples

Bind to the dragEnd event of jqxListBox.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox (onDragEnd)="DragEnd($event)"
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent {
    DragEnd(event: any): void 
    {
        // Do Something
    }

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

							

						

This event is triggered when the user selects an item.

Code example

Bind to the select event by type: jqxListBox.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code examples

Bind to the select event of jqxListBox.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox (onSelect)="Select($event)"
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
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 example

Bind to the unselect event by type: jqxListBox.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code examples

Bind to the unselect event of jqxListBox.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox (onUnselect)="Unselect($event)"
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
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: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myListBox.addItem(layout);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.beginUpdate();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.clear();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.clearSelection();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.checkIndex(3);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.checkItem(Item1);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.checkAll();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.clearFilter();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.destroy();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.disableItem(Item1);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.disableAt(0);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.enableItem(Item1);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.enableAt(1);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.ensureVisible(1);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.endUpdate();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.focus();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myListBox.getItems();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myListBox.getSelectedItems();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myListBox.getCheckedItems();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myListBox.getItem();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myListBox.getItemByValue(Item1);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myListBox.getSelectedItem();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myListBox.getSelectedIndex();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.insertAt(Item1,0);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.invalidate();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.indeterminateItem(Item);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.indeterminateIndex(0);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.loadFromSelect(select);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.removeItem(Item1);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.removeAt(0);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.render();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.refresh();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.selectItem(Item1);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.selectIndex(1);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.updateItem(Item1,Item2);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.updateAt(Item,0);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.unselectIndex(0);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.unselectItem(Item);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.uncheckIndex(0);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.uncheckItem(Item1);
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myListBox.uncheckAll();
    }

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

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListBox #myListBox 
            [width]="200" [height]="250" [source]="source">
        </jqxListBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListBox') myListBox: jqxListBoxComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myListBox.val();
    }

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