# angular-select2

**Repository Path**: godbasin/angular-select2

## Basic Information

- **Project Name**: angular-select2
- **Description**: select2 in angular(>=2.0-release).
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-11-25
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Angular-Select2

This project was generated with [Angular CLI](https://github.com/angular/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](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)](https://angular.io/)
- [jQuery](https://jquery.com/)
- [select2](https://select2.github.io/)

## How to use
---
### Install
``` cmd
// npm install
npm install angular-select2-component --save

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

### Use as component
1. Import component.

``` javascript
// 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.

``` html
<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.

``` json
// 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](https://select2.org/configuration/options-api)
  - `setting`: `{ settingOption: value, settingOption: value }`