New to Kendo UI for Angular? Start a free 30-day trial

Data Binding

The Kendo UI for Angular ListBox is a component that displays a list of items.

The data input of the ListBox accepts an array of items - strings or objects. If objects are used, it is necessary to pass a textField input to the component, so that the correct text can be displayed for each item.

It is important to note that out of the box, the component is purely presentational and the buttons of its toolbar are not tied to a specific behavior. Instead, the ListBox emits an actionClick event every time a button is pressed.

There are two ways to make the buttons work:

Using the data-binding directive

Use the kendoListBoxDataBinding directive which handles the actionClick events automatically. When the end user interacts with the toolbar, the directive modifies the original data array accordingly. As an added benefit, the directive accepts the connectedWith input property, which lets the user connect multiple listboxes together and move items between them.

Example
View Source
Edit In Stackblitz  
Change Theme:

Manual Data Binding

Bind to the actionClick event and modify your data in its handler. This allows for full flexibility with regard to handling actions.

Some other useful building blocks for the manual handling of the actionClick events, are the selectItem method and the selectedIndex field of the ListBox.

Example
View Source
Edit In Stackblitz  
Change Theme: