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.
Try it out with this plunker or by cloning angular2-select-demo.
npm install --save angular2-select
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'
}
};Import the SelectModule and define it as one of the imports of your
application module:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {ReactiveFormsModule} from '@angular/forms';
import {SelectModule} from 'angular2-select';
import {AppComponent} from './app.component';
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
SelectModule
],
declarations: [
AppComponent
],
bootstrap: [
AppComponent
]
})
export class AppModule { }Add the following HTML to the component template in which you want to use the select component:
<ng-select
[options]="options">
</ng-select>Within the component class you have to set the list of select options. This must be a list of objects, with for each object a value (option identifier) and a label (which the user sees in the select drop down).
export class YourComponent {
options = [
{
value: 'a',
label: 'Alpha'
},
{
value: 'b',
label: 'Beta'
},
{
value: 'c',
label: 'Gamma'
}
];
}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).
import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';
@Component({
selector: 'my-app',
template: `
<h1>Angular 2 select demo app</h1>
<form
[formGroup]="form">
<ng-select
[options]="options"
placeholder="Select one"
multiple="false"
allowClear="true"
formControlName="select">
</ng-select>
</form>
<hr>
<div>
Selected option id: {{form.value.select}}
</div>`
})
export class App implements OnInit {
form: FormGroup;
options = [];
constructor() {
this.options = [
{
value: 'a',
label: 'Alpha'
},
{
value: 'b',
label: 'Beta'
},
{
value: 'c',
label: 'Gamma'
}
];
}
ngOnInit() {
this.form = new FormGroup({});
this.form.addControl('select', new FormControl(''));
}
}Next to the obligatory options parameter, the ng-select tag supports the
following optional parameters:
<ng-select
[options]="options"
multiple="true"
placeholder="Select an option"
allowClear="true"
theme="default">
</ng-select>The optional parameters can also be bound to a variable in the component's class.
<ng-select
[options]="options"
multiple="true"
[placeholder]="placeholder"
[allowClear]="canClearSelect"
theme="default">
</ng-select>export class YourComponent implements {
placeholder: string = 'Select an option';
canClearSelect: boolean = true;
// ...
}Optional parameters will be set to their default value if they are not defined
in the ng-select tag.
default: 'false'
A boolean to choose between single and multi-select.
default: ''
The placeholder value is shown if no option is selected.
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.
default: 'default'
Currently the original select2 CSS is used, which allows you to select between
to themed looks, default and classic.
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
Clone or fork the repository and run:
npm install
gulp build