@smplfrs/angular-select2 NPM

Prerequisites

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.