Giter Site home page Giter Site logo

tealpartners / ng-select2 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from muhammadarsal/ng-select2

28.0 7.0 34.0 2.08 MB

Angular 13 wrapper for jQuery select2

Home Page: https://tealpartners.github.io/ng-select2

TypeScript 83.16% HTML 14.18% JavaScript 2.12% CSS 0.53%
angular select2

ng-select2's Introduction

This package is archived and no longer maintained

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











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.

  • 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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.