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
@NgModule({
declarations: [
....,
Select2Component
],
...
})
- Add it to your template. You need to define at least
data@Input.
Example of exampleData can be found here.
<select2 [data]="exampleData"></select2>
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
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