angular2-select

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.

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

To use the select components in one of your components, import the SELECT_DIRECTIVES with:

import {SELECT_DIRECTIVES} from 'angular2-select';

Add the following HTML to your component's template to include the select component:

<ng-select
	[options]="options">
</ng-select>

And add the SELECT_DIRECTIVES to the list of directives.

Within your component's class you can 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'
		}
	];
}

Parameters

Next to the obligatory options parameter, the ng-select tag supports the following optional parameters:

<ng-select
	[options]="options"
    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"
    [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.

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

IMPORTANT Building with gulp build currently only works with node version 6, due to an issue in one of gulp-typescript's dependencies (beautylog).

Changelog

1.0.0-beta.0 (2017-01-07)

Breaking changes

• Changed styling, Sass stylesheet for select and dropdown component instead of the original select2 CSS file.

Features

• Set background color and text color of highlighted option (#61).
• Set width of select component with ngStyle (#59).
• Hide filter if number of options is less than given number (#44).
• Set custom text for 'No results found' (#9).
• Functions open and close to open/close drop down from ts (#43).
• Disable select component.
• Clear selection function.

Improvements

• Switched from using npm to yarn for package management.
• Call onTouched when focus on select component (#24).
• Added demo page with examples.
• Simplified HTML structure with more intuitive classes.
• Moved logic to separate option and option-list classes.

Bug fixes

• Greyed out placeholder text for singe select (#48).
• Close all drop downs on click outside, close drop down when pressing tab key (#58).

<a name="1.0.0-alpha.12"></a>