For Angular version 4.x.x and up. Forked from ng2-select2. Supports two-way data-binding.
For this plugin to work you need to add two javascript libraries to your project
First install jQuery using npm
npm i -S jquery
Then install select2 using npm
npm i -S select2
Now include their scrpits and styles in your angularcli.json
file
"styles": [
"styles.css",
"../node_modules/select2/dist/css/select2.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/select2/dist/js/select2.min.js"
],
Add package to your project npm i -S ng-select2
(this will save package to your dependencies
in package.json
)
- Add declaration to your
app.module.ts
import { NgSelect2Module } from 'ng-select2';
@NgModule({
imports: [
....,
NgSelect2Module
],
...
})
- Add it to your template.
<ng-select2 [data]="exampleData"></ng-select2>
<ng-select2
[(ngModel)]="fruit"
[data]="fruitList"
[placeholder]="'Please select a fruit...'">
</ng-select2>
- data
Array<Select2OptionData>
: Data used for generating select2 - inferface definition - value
string
: Default value for select2 - width
string
: Set width for the input, default value isresolve
- disabled
boolean
: Disable select2, default value isfalse
- placeholder
string
: Placeholder for select2 - options
Select2Options
: Set options for select2, all available options for select2
- valueChanged
string
: Emitted when value changes in select2 drop-down