Dropdown List Module Name: DropDownListModule
Module Name: DropDownListModule
The DropdownList is a component that can be selected and filtered
Showcase
Basic
<tl-dropdown-list
[data]="data"
[keyText]="'textItem'"
[(ngModel)]="itemSelected">
</tl-dropdown-list>
Auto Scroll
<tl-dropdown-list
[data]="bigData"
[keyText]="'textItem'"
[keyValue]="'value'"
[(ngModel)]="itemSelected4">
</tl-dropdown-list>
Scroll
<tl-dropdown-list
[data]="data"
[keyText]="'textItem'"
[(ngModel)]="itemSelected3"
[keyValue]="'value'">
</tl-dropdown-list>
Placeholder
<tl-dropdown-list
[data]="data"
[keyText]="'textItem'"
[placeholder]="'Select item'"
[keyValue]="'value'"
[(ngModel)]="itemSelected2">
</tl-dropdown-list>
Label
<tl-dropdown-list
[data]="data"
[label]="'Label'"
[labelSize]="'80px'"
[keyText]="'textItem'"
[keyValue]="'value'"
[(ngModel)]="itemSelected5">
</tl-dropdown-list>
Custom Height
<tl-dropdown-list
[data]="data"
[placeholder]="'Select item'"
[itemHeight]="'30px'"
[keyText]="'textItem'"
[keyValue]="'value'"
[(ngModel)]="itemSelected6">
</tl-dropdown-list>
Custom Width + Filter
<tl-dropdown-list
[data]="data"
[placeholder]="'Select item'"
[width]="'120px'"
[searchOnList]="true"
[keyText]="'textItem'"
[keyValue]="'value'"
[(ngModel)]="itemSelected7">
</tl-dropdown-list>
Required
<tl-dropdown-list
[data]="data"
[label]="'Label'"
[labelSize]="'80px'"
[labelPlacement]="'top'"
required
[keyText]="'textItem'"
[keyValue]="'value'"
[(ngModel)]="itemSelected9">
</tl-dropdown-list>
Disabled
<tl-dropdown-list [data]="data" [placeholder]="'Select item'" [keyText]="'textItem'" [disabled]="true"></tl-dropdown-list>
Simple Data
<tl-dropdown-list [data]="[ 'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5' ]" [(ngModel)]="itemSelected8"></tl-dropdown-list>
GroupBy
<tl-dropdown-list
[data]="groupData"
[placeholder]="'Select item'"
[keyText]="'textItem'"
[groupBy]="'gender'"
[keyValue]="'value'">
</tl-dropdown-list>
Custom With Icon
<tl-dropdown-list
[data]="groupData"
[placeholder]="'Select item'"
[keyText]="'textItem'"
[icon]="'icon'"
[groupBy]="'gender'"
[keyValue]="'value'">
</tl-dropdown-list>
Important
Use DropdownList As Simple Array
There's TWO
ways to use DropdownList, the first one is using an Simple Array of Objects
, passing only the data that you want to. For Example:
[ 'William', 'James', 'Anne', 'Sara' ]
Use DropdownList As Complex Array
The other one is a Complex Array of Objects
where you must
pass a pattern to the component.
Note: The Keys inside those objects can be custom, referenced through the properties.
[
{ id: 1, firstName: 'Antonio', lastName: 'King', email: 'contact@domain.com' },
{ id: 2, firstName: 'Junior', lastName: 'King', email: 'contact@domain.com' },
{ id: 3, firstName: 'Murilo', lastName: 'King', email: 'contact@domain.com' },
{ id: 4, firstName: 'Sara', lastName: 'King', email: 'contact@domain.com', },
{ id: 5, firstName: 'Claudia', lastName: 'King', email: 'contact@domain.com' }
];
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
data | object | array | null | Sets the data of the Dropdown List. | any object | any array |
debounceTime | boolean | 200 | Delay of time used on searching | number |
defaultOption | boolean | false | Handle if will have the null option | true | false |
disabled | boolean | false | Disables the dropdown list if set to true. | true | false |
groupBy | string | null | Key that would be used to group items | any text |
icon | string | null | Sets the data item field that represents the item icon. | any text |
identifier | string | null | String key used to compare values when model mode is string. | any text |
itemHeight | string | 23px | Sets the height box and itemHeight of items list. | px | % | em |
keyText | string | null | Sets the data item field that represents the item text. | any text |
keyValue | string | null | Sets the data item field that represents the item value. | any text |
label | string | null | Create a label together with Dropdown List. | any text |
labelPlacement | string | left | Sets the label position. | left | top |
labelSize | string | 100px | Sets the label width. | px | % | em |
maxHeight | string | 150px | Sets the max height of the list. | px | % | em |
modelMode | string | object | Operating mode of model values, some servers uses ID hash of value fields and others the object itself. The model mode is used to compare value of models with dropdown dataSource when angular is loading the form values. | string | object |
placeholder | string | Select item | Display a help text on dropdown list. | any text |
searchOnList | boolean | false | Handle if will have input search or not | true | false |
width | string | 120px | Sets the width of Dropdown List. | px | % | em |
Events
Name | Description |
---|---|
selectItem | Dispatched when items is selected. |