ngx-sd-select2 v1.16.3

This package is archived and no longer maintained

You can use @ng-select/ng-select as replacement.

Angular 16 wrapper component of jquery select2 (ngx-sd-select2)

For Angular version 8.x.x and up. Forked from ng2-select2. Supports two-way data-binding.

Prerequisites

For this plugin to work you need to add two javascript libraries to your project

• Jquery
• Select2

First install jQuery using npm

npm i -S jquery

Then install select2 using npm

npm i -S select2

Now include their scrpits and styles in your angular.json file

"styles": [
  "styles.css",
  "node_modules/select2/dist/css/select2.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.js",
  "node_modules/select2/dist/js/select2.min.js"
],

Installation

Add package to your project npm i -s ngx-sd-select2 (this will save package to your dependencies in package.json)

Basic implementation

1) Add declaration to your app.module.ts

import { NgSelect2Module } from 'ngx-sd-select2';

@NgModule({
  imports: [
    ....,
    NgSelect2Module
  ],
  ...
})

2) Add it to your template.

<ngx-sd-select2 [data]="exampleData"></ngx-sd-select2>

Two-way data-binding

<ngx-sd-select2 
	[(ngModel)]="fruit"
	[data]="fruitList"
	[placeholder]="'Please select a fruit...'">
</ngx-sd-select2>

Options

Inputs

• data Array<Select2OptionData>: Data used for generating select2 - inferface definition
• value string: Default value for select2
• dropdownParent string: Allows you to customize placement of the dropdown.
• width string: Set width for the input, default value is resolve
• disabled boolean: Disable select2, default value is false
• allowClear boolean: Provides support for clearable selections, default value is false
• placeholder string: Placeholder for select2
• id string: Set the id attribute
• class string: Set the class attribute
• required boolean: Set the required attribute
• options Options: Set options for select2, all available options for select2

Outputs

• valueChanged string | string[]: Emitted when value changes in select2 drop-down