Angular2 select component

The basics

Options

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.

Single select

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.

Multiple select

Set the multiple property to true to get a multiple select component.

Get the select value

Bind to select value with ngModel
Value: {{selectedValues}}

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).

Respond to (de)selected events
Last event: {{lastEvent}}

The selected and deselected output event enable you to keep track of what options are being (de)selected.

Use the select component in a form TODO

Change options

Set options after delay

In thise example the list of characters is set after five seconds. Before that, no options will show up in the drop down.

Update list of options

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

Disable select component

Use the boolean disabled property to disable the select component

Disable select options

Not yet supported.

Selection

Clear button (single select only)

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.

Clear function

Or use the clear() function to have all selected options cleared.

Limit the number of selected options

Not yet supported.

Customized text

Placeholder single select

If you set the placeholder property, this text will be shown in the select container if no option is selected.

Placeholder multiple select

Same as for the single select, the placeholder will be shown if no options are selected.

No results found text

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

Set select container width

You can use Angular's ngStyle to modify the width of the select container.

Set highlight color

The color of the highlighted option in the dropdown can be changed with the highlightColor and highlightTextColor properties.

Hide filter

No filter single select

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).

No filter multiple select

The same as for the single select example above.

Open/close dropdown

Open/close dropdown function

Not yet supported.