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
<tl-listbox [data]="dataBasic" [keyText]="'firstName'"></tl-listbox>
Basic Usage - Lazy Mode
<tl-listbox [data]="dataBasic" [keyText]="'firstName'"></tl-listbox>
Custom Template Normal Mode
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
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
Name | Type | Default | Description | Options |
---|---|---|---|---|
data | Array<Object> | null | Array of data to shown on list. | Array<Object> |
debounceTime | number | 200 | Debounce time of list search | number |
filterEmptyMessage | string | 'Nothing to Show' | Text shown when the search results are empty | any text |
height | string | 300px | Height of list wrapper, used when fixedHeight property is true. | any css measure |
inputElement | ElementRef | null | Input element used to control list. | ElementRef |
lazyMode | boolean | false | Define if list will work lazy load or not. | true | false |
listStripped | boolean | false | Handle to show list stripped | true | false |
rowHeight | number | 40 | The row height in the list. | any number |
rowsPage | number | 10 | Number of lines that going to be shown on list, created on DOM | any number |
searchBy | string | description | string to receive the key that's going to be used to search on list | any text |
searchControl | ElementRef | null | Receives an ElementRef input used for search on list. | ElementRef |
template | TemplateRef<any> | null | Template of item list | TemplateRef |
totalLength | number | 100 | Total length of datasource when using lazy mode | number |
Events
Name | Description |
---|---|
clickItem | Dispatched when an element of the list is clicked. |
selectItem | Dispatched when key enter is pressed. |