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

Try it out with this plunker or by cloning angular2-select-demo.

Getting started

Install

npm install --save angular2-select

Configuration

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'
	}
};

Usage

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'
		}
	];
}

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

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(''));
    }
}

Parameters

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.

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.

theme

default: 'default'

Currently the original select2 CSS is used, which allows you to select between to themed looks, default and classic.

Not yet 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