The basics
Define options in the component class as an array of objects. Each object should have a value
and a label
. The following small set of options is used in the examples below.
Add a select component to your template using the ng-select
tag, and use the options
property to bind it to your list of options.
Set the multiple
property to true
to get a multiple select component.
Get the select value
Use the ngModel
property to (two-way) bind a variable to the select component's value. This means that the variable value will be updated as soon as options are (de)selected, and that the selected options will be updated if you change the variable value (by clicking the button in this example).
The selected
and deselected
output event enable you to keep track of what options are being (de)selected.
Change options
In thise example the list of characters is set after five seconds. Before that, no options will show up in the drop down.
You can update options by changing the list of options that is bound to the select component. Notice that selected options will remain selected if you update the list of options, given that this option is still in the updated list of options.
Disable
Use the boolean disabled
property to disable the select component
Not yet supported.
Selection
Set the allowClear
property to true
to enable clearing the selected option by clicking the little cross on the right. This is only available for the single select component.
Or use the clear()
function to have all selected options cleared.
Not yet supported.
Customized text
If you set the placeholder
property, this text will be shown in the select container if no option is selected.
Same as for the single select, the placeholder will be shown if no options are selected.
By default the message "No results found" is shown if no options match the given filter input. Use the notFoundMsg
property to change this message.
Customized style
You can use Angular's ngStyle
to modify the width of the select container.
The color of the highlighted option in the dropdown can be changed with the highlightColor
and highlightTextColor
properties.
Hide filter
Use the noFilter
property to have the filter hidden if the number of options is less then the specified number. In this example, the filter is not shown because the number of options (5) is less then the noFilter
value (10).
The same as for the single select example above.
Open/close dropdown
Not yet supported.