@smplfrs/angular-select2

Install [JQuery](https://www.npmjs.com/package/jquery) ``` npm i -s jquery ```

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@smplfrs/angular-select2
100.0.1-beta.9a month ago3 years agoMinified + gzip package size for @smplfrs/angular-select2 in KB

Readme

Prerequisites
Install JQuery ``` npm i -s jquery ``` Include JQuery in your angular.json file ``` "scripts": "nodemodules/jquery/dist/jquery.js" , ```
Get started
Install package ``` npm i -s @smplfrs/angular-select2 ``` Include default styles in your angular.json file ``` "styles": "nodemodules/select2/dist/css/select2.min.css" , ``` Import the SmplSelect2Module in your app module ```typescript import { SmplSelect2Module } from '@smplfrs/angular-select2'; ... @NgModule({ ... imports:
SmplSelect2Module
, ... }) ```

Usage

Static options

static-options.component.html ```html ```

Dynamic options

dynamic-options.component.html ```html dataSource="dataSource"> ``` dynamic-options.component.ts ```typescript dataSource = { data:
{ id: 1, text: 'Option 1' },
{ id: 2, text: 'Option 2' },
{ id: 3, text: 'Option 3' }
}; ```

Async data source

async-data.component.html ```html dataSource="dataSource"> ``` async-data.component.ts ```typescript 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> | 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. |