Dropdown List Module Name: DropDownListModule

Module Name: DropDownListModule

The DropdownList is a component that can be selected and filtered

Showcase
Basic
Returned Value:
<tl-dropdown-list
  [data]="data"
  [keyText]="'textItem'"
  [(ngModel)]="itemSelected">
</tl-dropdown-list>
Auto Scroll
Returned Value:
<tl-dropdown-list
  [data]="bigData"
  [keyText]="'textItem'"
  [keyValue]="'value'"
  [(ngModel)]="itemSelected4">
</tl-dropdown-list>
Scroll
Returned Value:
<tl-dropdown-list
  [data]="data"
  [keyText]="'textItem'"
  [(ngModel)]="itemSelected3"
  [keyValue]="'value'">
</tl-dropdown-list>
Placeholder
Returned Value:
<tl-dropdown-list
  [data]="data"
  [keyText]="'textItem'"
  [placeholder]="'Select item'"
  [keyValue]="'value'"
  [(ngModel)]="itemSelected2">
</tl-dropdown-list>
Label
Label
Returned Value:
<tl-dropdown-list
  [data]="data"
  [label]="'Label'"
  [labelSize]="'80px'"
  [keyText]="'textItem'"
  [keyValue]="'value'"
  [(ngModel)]="itemSelected5">
</tl-dropdown-list>
Custom Height
Returned Value:
<tl-dropdown-list
  [data]="data"
  [placeholder]="'Select item'"
  [itemHeight]="'30px'"
  [keyText]="'textItem'"
  [keyValue]="'value'"
  [(ngModel)]="itemSelected6">
</tl-dropdown-list>
Custom Width + Filter
Returned Value:
<tl-dropdown-list
  [data]="data"
  [placeholder]="'Select item'"
  [width]="'120px'"
  [searchOnList]="true"
  [keyText]="'textItem'"
  [keyValue]="'value'"
  [(ngModel)]="itemSelected7">
</tl-dropdown-list>
Required
Returned Value:
<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
NameTypeDefaultDescriptionOptions
dataobject | arraynullSets the data of the Dropdown List. any object | any array
debounceTimeboolean200Delay of time used on searching number
defaultOptionbooleanfalseHandle if will have the null option true | false
disabledbooleanfalseDisables the dropdown list if set to true. true | false
groupBystringnullKey that would be used to group items any text
iconstringnullSets the data item field that represents the item icon. any text
identifierstringnullString key used to compare values when model mode is string. any text
itemHeightstring23pxSets the height box and itemHeight of items list. px | % | em
keyTextstringnullSets the data item field that represents the item text. any text
keyValuestringnullSets the data item field that represents the item value. any text
labelstringnullCreate a label together with Dropdown List. any text
labelPlacementstringleftSets the label position. left | top
labelSizestring100pxSets the label width. px | % | em
maxHeightstring150pxSets the max height of the list. px | % | em
modelModestringobjectOperating 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
placeholderstringSelect itemDisplay a help text on dropdown list. any text
searchOnListbooleanfalseHandle if will have input search or not true | false
widthstring120pxSets the width of Dropdown List. px | % | em
Events
NameDescription
selectItemDispatched when items is selected.