/angular-select2

select2 in angular(>=2.0-release).

Primary LanguageTypeScriptMIT LicenseMIT

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):

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 {
}
  1. Template.
<select2 [options]="options" [settings]="{ setting: value }" [(ngModel)]="optionSelected" (onSelect)="onSelect($event)"></select2>
  1. 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 }