The ListBox control displays a list of items that can contain plain text or HTML, and allows users to select items with the mouse or keyboard.
These samples use the WjListBox component and Angular 2.
The simplest way to use the ListBox is to use an array of strings as the itemsSource, and then use the selectedItem property to retrieve the string that is selected:
Selected Item: {{listBox1.selectedItem}}
Selected Index: {{listBox1.selectedIndex}}
A more flexible approach is to use an array of objects as the itemsSource and set the displayMemberPath property to indicate which property of the objects to display on the list:
Selected Item: {{items.currentItem.country}}
Selected Index: {{items.currentPosition}}
By default, the ListBox allows one item to be selected at a time. But you can use the ListBox as a multi-item selector by setting the checkMemberPath property to the name of a Boolean value on the source objects. When you do that, the ListBox will show checkboxes next to each item and will bind their value to the specified property:
{{items.currentItem.country}} is {{items.currentItem.selected}}
By default, the ListBox items are plain text. But you can have list items show HTML by setting the isContentHtml property to true:
Selected Item: {{lbHtml.selectedItem}}
Selected Index: {{lbHtml.selectedIndex}}
Use ListBox templates to define the layout and content of the list items as HTML fragments that may include Angular 2 components, directives and bindings: