This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

ng-select2
TypeScript icon, indicating that this package has built-in type declarations

1.4.1 • Public • Published

Angular 13 wrapper component of jquery select2 (ng-select2)

npm version License: MIT Actions Status

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

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 ng-select2 (this will save package to your dependencies in package.json)

Basic implementation

  1. Add declaration to your app.module.ts
import { NgSelect2Module } from 'ng-select2';

@NgModule({
  imports: [
    ....,
    NgSelect2Module
  ],
  ...
})
  1. Add it to your template.
<ng-select2 [data]="exampleData"></ng-select2>

Two-way data-binding

<ng-select2 
	[(ngModel)]="fruit"
	[data]="fruitList"
	[placeholder]="'Please select a fruit...'">		
</ng-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

Demos for Angular wrapper for Select2

You can view a live demo here

Every single demo is separate component. Bellow you can find links to components with descriptions.

Demo

  • basic demo with only data input
  • disabled value in data array

Demo with options

  • width option
  • theme option
  • multiple option
  • closeOnSelect option

Demo with custom template demo

  • custom template for drop down
  • custom template for select2 input

Demo with data changing demo

  • when you change value in drop down, new value is displayed on the screen
  • you can change selected value
  • you can change select2 data

Demo with dynamic load demo

  • data is loaded with 4 second delay
  • selected value is loaded with 6 second delay

Demo with a multiple options

  • multiple options
  • default value
  • tags

Demo with value changed

  • Demo with value changed output to console log

Demo with allow clear option

  • Demo with allow clear option

Demo with a form

  • Demo with a form

Demo forked from: https://github.com/NejcZdovc/ng2-select2-demo

Readme

Keywords

Package Sidebar

Install

npm i ng-select2

Weekly Downloads

3,159

Version

1.4.1

License

MIT

Unpacked Size

96.6 kB

Total Files

16

Last publish

Collaborators

  • muhammadarsal
  • davidcru