For Angular version 2.x.x and up
For this plugin to work you need to add two javascript libraries to your project
First option and preferred one is to add libraries to your package builder.
- You can find example of how to add libraries to the Angular CLI in demo branch.
- You can also add it to webpack directly.
Second option is to include libraries into your html head:
<head>
<meta charset="utf-8">
<title>Ng2Select2Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="./assets/jquery.min.js"></script>
<script src="./assets/select2.min.js"></script>
</head>
Add package to your project npm i -S ng2-select2 (this will save package to your dependencies in package.json)
- Add declaration to NgModule
import { Select2Module } from 'ng2-select2';
@NgModule({
imports: [
....,
Select2Module
],
...
})
- Add it to your template. You need to define at least
data@Input.
Example of exampleData can be found here.
<select2 [data]="exampleData"></select2>
- data
Array<Select2OptionData: Data used for generating select 2 - value
string: Default value for select 2 - cssImport
boolean: Disable or enable default style for select 2, default value istrue - width
string: Set width for the input, default value isresolve - disabled
boolean: Disable select2, default value isfalse - options
Select2Options: Set options for select 2, all available options for select 2
- valueChanged
string: Emitted when value changes in select 2 drop down
You can view a live demo here or check out demo branch where you can find source of this demo created with Angular CLI.
Every single demo is separate component. Bellow you can find links to components with descriptions.
- basic demo with only data input
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 custom matcher
- we only match results if they are the same from the start of the string