Angular 2 select component
A native select component for angular 2, based on the select2 JQuery plugin. The component is currently in alpha, so breaking changes are to be expected.
- Demo
- Getting started
- Use with ngModel
- Use in reactive forms
- Input properties
- Events
- Not supported
- Develop
Demo
Try it out with this plunker or by cloning angular2-select-demo.
Getting started
Install
npm install --save angular2-select
Configuration
Angular cli
After installation, no additional configuration is needed. The SelectModule
can be added to the list of imports of your module. See below for examples.
Systemjs
In systemjs.config.js
add angular2-select
to map and package:
var map = // others..., 'angular2-select': 'node_modules/angular2-select'; var packages = // others..., 'angular2-select': main: 'index.js' defaultExtension: 'js' ;
ngModel
Use with Import the SelectModule
and define it as one of the imports of your
application module. Import the FormsModule
so that you can use ngModel
:
;;;; ;
Add the select component to one of your templates:
In the corresponding component class, set the list of options (myOptions
) and
set up the two-way data binding by defining mySelectValue
.
;
In this example the last two options are selected in ngOnInit
by initializing
the mySelectValue
to ['b', 'c']
. Because of the two-way data binding,
updating the mySelectValue
will cause the selection in your view to be
updated.
Use in reactive forms
The component can be used in an angular 2 form, just like you would use regular
input
or select
elements (the angular2-select
component implements the
ControlValueAccessor interface).
For use in reactive forms, import the ReactiveFormsModule
and SelectModule
and add both to the list of imports of your application module:
;;;; ;
Add a form with the select component to your template:
Selected option id: {{form.value.mySelect}}`
Within the corresponding component set the list of select options
(myOptions
).
;;
Input properties
Next to the obligatory options
property, the ng-select
tag supports the
following optional properties:
// ...
Optional properties will be set to their default value if they are not defined
in the ng-select
tag.
multiple
default: 'false'
A boolean to choose between single and multi-select.
placeholder
default: ''
The placeholder value is shown if no option is selected.
allowClear
default: 'false'
If set to true, a button with a cross that can be used to clear the currently selected option is shown if an option is selected.
Events
The angular2-select module emits output events to inform parent components that
the select drop down is opened
or closed
, and that an item is selected
or
deselected
.
A parent component can bind to these events with the output properties opened
,
closed
, selected
, and deselected
:
With the corresponding event handlers defined in the parent component's class:
onSelectOpened onSelectClosed onSelecteditem onDeselecteditem
The (de)selected item is provided as parameter to the selected
and
deselected
events. This is an object with properties value
and label
, the
same as the objects in the list of select options
that was provided as input
for the module.
Not supported
Select2 features that are currently not supported are:
- Tests
- Option groups
- Loading remote data
- Disabled mode
- Disabled results
- Multiselect
- Limit the number of selections
- Tagging
- Localization, RTL
- Themes
- Templates
Develop
Clone or fork the repository and run:
npm install
gulp build