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

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:

<head>
  <meta charset="utf-8">
  <title>Ng2Select2Demo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="./assets/jquery.min.js"></script>		
  <script src="./assets/select2.min.js"></script>
</head>

Installation

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

Basic implementation

Add declaration to NgModule

import { Select2Module } from 'ng2-select2';

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

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

Example of exampleData can be found here.

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

Options

Inputs

data Array<Select2OptionData>: 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 true
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

Outputs

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.

Vishal-Isharani / ng2-select2