MultiSelect Module Name: MultiSelectModule

Module Name: MultiSelectModule

MultiSelect is a component where exists a list of itens to search and select like tags.

Showcase
Complex Array
Maria
Laura
<tl-multiselect
  [data]="dataNoSourceBasic"
  [labelTag]="'firstName'"
  [label]="'Complex Array'"
  [keyValue]="'id'"
  [labelSize]="100"
  formControlName="complex"
  [sortAlphabetically]="true"
  [query]="'firstName'">
</tl-multiselect>
Array String*
<tl-multiselect
  [data]="dataSourceStringArray"
  [label]="'Array String'"
  [labelSize]="100"
  formControlName="arrayString"
  [sortAlphabetically]="true">
</tl-multiselect>
Properties
NameTypeDefaultDescriptionOptions
colorstringbasicChanges the default color of multiselect tags. basic | primary | success | information | warning | danger | light | dark
dataArray<Object>nullArray of data to shown on list. any text
defaultColorTagstring#66CC99The background color default for all tags. Hexadecimal
defaultIconTagstringnullThe icon default for all tags. FontAwesome Class | IonIcons class
detailstringnullKey that will shown on detail section of list item. Object Key
detailOnTagbooleanfalseControls if the tag will be shown with the detail. true | false
iconstringnullKey that will shown on icon section of list item. FontAwesome Class | IonIcons class
itemAmountnumber5Number of itens that going to be shown on list. any number
itemHeightstring7pxHeight of item list. px | % | em
keyColorstringnullKey that going to be used to change the color tag. any text
keyValuestringnullKey that going to be used as value of component. any text
labelstringnullKey that will shown on label list. any text
labelSizestring120pxWidth of label text px | % | em
labelTagstringqueryDefines what text will be shown on text tag. Object Key
minLengthSearchnumber2Number of itens that going to be shown on list. any number
onlyKeyValuebooleanfalseControls if the component will work only with key value true | false
openFocusbooleannullControls if the list will be show on input focus. any text
placeholderstringnullPlaceholder of the input. any text
querystringnullKey that going to be used to search. any text
sortAlphabeticallybooleanfalseControls if the list will be show sorted alphabetically. true | false
Events
NameParametersDescription
getSelecteds
selected : Button Selected
Dispacthed when a tag is selected or removed.
tagClick
object : Tag Clicked
Dispacthed when a tag is clicked.
tagRemove
object : Tag Removed
Dispacthed when a tag is removed.