Angular 4 wrapper component of jquery select2 (ng-select2)

For Angular version 4.x.x and up. Forked from ng2-select2. Supports two-way data-binding.

Prerequisites

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

• Jquery
• Select2

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"
],

Installation

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

Basic implementation

1) Add declaration to your app.module.ts

import { NgSelect2Module } from 'ng-select2';

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

2) Add it to your template.

<ng-select2 [data]="exampleData"></ng-select2>

Two-way data-binding

<ng-select2 
    [(ngModel)]="fruit"
    [data]="fruitList"
    [placeholder]="'Please select a fruit...'">     
</ng-select2>

Options

Inputs

• 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 is resolve
• disabled boolean: Disable select2, default value is false
• placeholder string: Placeholder for select2
• options Select2Options: Set options for select2, all available options for select2

Outputs

• valueChanged string: Emitted when value changes in select2 drop-down