@smplfrs/angular-select2
v0.0.1-beta.12
Published
Install [JQuery](https://www.npmjs.com/package/jquery) ``` npm i -s jquery ```
Downloads
912
Readme
Prerequisites
Install JQuery
npm i -s jquery
Include JQuery in your angular.json
file
"scripts": [
"node_modules/jquery/dist/jquery.js"
],
Get started
Install package
npm i -s @smplfrs/angular-select2
Include default styles in your angular.json
file
"styles": [
"node_modules/select2/dist/css/select2.min.css"
],
Import the SmplSelect2Module
in your app module
import { SmplSelect2Module } from '@smplfrs/angular-select2';
...
@NgModule({
...
imports: [
SmplSelect2Module
],
...
})
Usage
Static options
static-options.component.html
<select smplSelect2 static>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Dynamic options
dynamic-options.component.html
<select smplSelect2 [dataSource]="dataSource">
</select>
dynamic-options.component.ts
dataSource = {
data: [
{ id: 1, text: 'Option 1' },
{ id: 2, text: 'Option 2' },
{ id: 3, text: 'Option 3' }
]
};
Async data source
async-data.component.html
<select smplSelect2 [dataSource]="dataSource">
</select>
async-data.component.ts
dataSource = {
ajaxFn: of([
{ id: 1, text: 'Option 1' },
{ id: 2, text: 'Option 2' },
{ id: 3, text: 'Option 3' }
]),
ajaxDelay: 1000
};
API reference
Input
| Name | Type | Default | Description |
| ------------------|-------------------------------------------|:---------:|--------------|
| smplSelect2
| Select2Config | | Configuration options for the control. |
| static
| boolean | false | Whether dropdown options should be rendered from html <options>
tags. |
| dataSource
| Select2DataSource | | Dynamic data source for dropdown options when static
is set to false
. |
| displayProperty
| string | 'text' | The property of dropdown option object used to display in selection panel. |
| valueProperty
| string | 'id' | The property of dropdown option object used as identifier. |
| placeholder
| string | '(NONE)' | The placeholder for the control. |
Output
| Name | Type | Description |
| ----------|---------------| -------------|
| select
| Select2Option | Emitted when selection changed. |
Class
Select2Config
See select2 configuration options.
Select2DataSource
| Name | Type | Description |
| ------------------|-----------------------------------| -------------|
| data
| any[] | A data array to render dropdown options. |
| ajaxFn
| Observable<any[]> | An async data source called when opening the dropdown. |
| ajaxDelay
| number | Delay time to execute ajaxFn
. |
| dataTransformFn
| (data: any[]) => Select2Option[] | Optional custom function to transform raw data into Select2Option. |