Angular wrapper for Select2 (ng2-select2)

 

For Angular version 2.x.x and up

Prerequisites

For this plugin to work you need to add two javascript libraries to your project
- Jquery
- Select2

First option and preferred one is to add libraries to your package builder.
- You can find example of how to add libraries to the Angular CLI in demo repository.
- You can also add it to webpack directly.

Second option is to include libraries into your html head:

``










`

Installation

Add package to your project npm i -S ng2-select2 (this will save package to your dependencies in package.json)




Basic implementation

1) Add declaration to NgModule
`
import { Select2Module } from 'ng2-select2';

@NgModule({
imports: [
....,
Select2Module
],
...
})
`

2) Add it to your template. You need to define at least data as @Input.

Example of exampleData can be found here.

`

`




Options

$3


* data Array: Data used for generating select 2 - inferface definition
* value string: Default value for select 2
* cssImport boolean: Disable or enable default style for select 2, default value is false
* width string: Set width for the input, default value is resolve
* disabled boolean: Disable select2, default value is false
* options Select2Options: Set options for select 2, all available options for select 2

$3

* valueChanged string`: Emitted when value changes in select 2 drop down

Demo

You can view a live demo here or check out demo repo where you can find source of this demo created with Angular CLI.