godbasin/angular-select2

select2 in angular(>=2.0-release).

Angular-Select2

This project was generated with Angular CLI version 1.0.1.

Instructions

This project is built for showing how to use angular-select2-component.

Angular-Select2-Component

Source code in: https://github.com/godbasin/angular4-select2/tree/npm-publish-code.

Related Versions

Angular-Select2-Component is baseed on these plugins and libs(version):

• angular(>= 2.0-release)
• jQuery
• select2

How to use

---

Install

// npm install
npm install angular-select2-component --save

// if you have not installed jquery
npm install jquery --save

Use as component

1. Import component.

// import NgModule
import {NgModule} from '@angular/core';
// import Select2Component
import {Select2Component} from 'angular-select2-component';

@NgModule({
  // ...
  // declare components
  declarations: [Select2Component]
})
export class YourModule {
}

2. Template.

<select2 [options]="options" [settings]="{ setting: value }" [(ngModel)]="optionSelected" (onSelect)="onSelect($event)"></select2>

3. Compile settings.

If you have set the include or exclude option in your tsconfig.json, you need to include the node_modules/angular-select2-component/index.ts file.

// tsconfig.json
{
  // ... other options
  "include": [
    "node_modules/angular-select2-component/index.ts"
  ]
}

Options

• options: option[]
  • select options for select2
  • option: {id: value, text: key} or string
• ngModel: option value that is selected
  • id or string while multiple is disable
  • id[] or string[] while multiple is enable
• onSelect
  • callback when option selected
  • parmas: option({id: value, text: key, selected: ifSelected} or string)
• settings
  • configurable settings, see Select2 options API
  • setting: { settingOption: value, settingOption: value }