Skip to content

smplfrs/angular-select2

Repository files navigation

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]="true">
  <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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published