ListBox Module Name: ListBoxModule

Module Name: ListBoxModule

ListBox is a component where exists a list of items to search and select.

Truly UI has two different types of list, the default and with Custom Template, like shown below.

Showcase
Basic Usage - Normal Mode
Nothing Found

<tl-listbox [data]="dataBasic" [keyText]="'firstName'"></tl-listbox>
Basic Usage - Lazy Mode
Nothing Found

<tl-listbox [data]="dataBasic" [keyText]="'firstName'"></tl-listbox>
Custom Template Normal Mode
Nothing Found

Atention: The example below needs to be interpolated {{item.firstName}} for example. Not allowed to used here on highlight code.

<tl-listbox [data]="dataBasic" [template]="template" [keyText]="'firstName'"></tl-listbox>
<ng-template let-item="item" #template>
    <li class="item-list">
      <img src="assets/img/avatar.png" height="30" width="30">
      item.firstName
    </li>
</ng-template>
Custom Template Lazy Mode
Nothing Found

Atention: The example below needs to be interpolated {{item.firstName}} for example. Not allowed to used here on highlight code.

<tl-listbox [data]="dataBasic" [template]="template" [keyText]="'firstName'"></tl-listbox>
<ng-template let-item="item" #template>
    <li>
      <img src="assets/img/avatar.png">
      item.firstName
    </li>
</ng-template>
Properties
NameTypeDefaultDescriptionOptions
dataArray<Object>nullArray of data to shown on list. Array<Object>
debounceTimenumber200Debounce time of list search number
filterEmptyMessagestring'Nothing to Show'Text shown when the search results are empty any text
heightstring300pxHeight of list wrapper, used when fixedHeight property is true. any css measure
inputElementElementRefnullInput element used to control list. ElementRef
lazyModebooleanfalseDefine if list will work lazy load or not. true | false
listStrippedbooleanfalseHandle to show list stripped true | false
rowHeightnumber40The row height in the list. any number
rowsPagenumber10Number of lines that going to be shown on list, created on DOM any number
searchBystringdescriptionstring to receive the key that's going to be used to search on list any text
searchControlElementRefnullReceives an ElementRef input used for search on list. ElementRef
templateTemplateRef<any>nullTemplate of item list TemplateRef
totalLengthnumber100Total length of datasource when using lazy mode number
Events
NameDescription
clickItemDispatched when an element of the list is clicked.
selectItemDispatched when key enter is pressed.