@@ -22,7 +22,7 @@ npm install --save angular2-select
2222
2323For yarn users:
2424```
25- yarn add --save angular2-select
25+ yarn add angular2-select
2626```
2727
2828### Configuration
@@ -40,34 +40,32 @@ import {SelectModule} from 'angular2-select';
4040import {AppComponent } from ' ./app.component' ;
4141
4242@NgModule ({
43+ declarations: [
44+ AppComponent
45+ ],
4346 imports: [
4447 BrowserModule
4548 SelectModule
4649 ],
47- declarations: [
48- AppComponent
49- ],
5050 bootstrap: [
5151 AppComponent
5252 ]
5353})
54- export class AppModule { }
54+ export class AppModule {}
5555```
5656
5757#### Systemjs
5858
59- This is not yet tested for the beta version!
59+ * Not yet tested for the beta version. *
6060
6161In ` systemjs.config.js ` add ` angular2-select ` to map and package:
6262
6363``` javascript
6464var map = {
65- // others...,
6665 ' angular2-select' : ' node_modules/angular2-select'
6766};
6867
6968var packages = {
70- // others...,
7169 ' angular2-select' : {
7270 main: ' index.js' ,
7371 defaultExtension: ' js'
@@ -79,95 +77,40 @@ var packages = {
7977
8078| Name | Type | Default | Description |
8179| ------------- | --------- | --------------------- | ---------------- |
80+ | options | Array<any >| [ ] | Required list of option objects. |
8281| allowClear | boolean | false | Only applies to single select. If set to true, a clickable clear selection cross is shown. |
8382| disabled | boolean | false | If set to true, the select component is disabled. |
83+ | highlightColor| string | #2196f3 | Background color of highlighted option. |
84+ | highlightTextColor | string | #fff | Text color of highlighted option. |
8485| multiple | boolean | false | If set to true, the select component is multi-select, otherwise single select. |
86+ | noFilter | number | 0 | ... |
8587| notFoundMsg | string | "No results found" | The message shown if no options are found for the current filter input value. |
8688| placeholder | string | "" | Placeholder text that is shown if no options are selected.
8789
8890## Output events
8991
9092| Name | Value | Description |
9193| ------------- | --------------------- | ------------- |
92- | opened | null | |
93- | closed | null | |
94- | selected | option | |
95- | deselected | option or [ option] | |
94+ | opened | null | Triggered if the select dropdown is opened. |
95+ | closed | null | Triggered if the select dropdown is closed. |
96+ | selected | option\* | Triggered if an options is selected, providing the selected option. |
97+ | deselected | option\* or [ option\* ] | Triggered if one or more options are deselected, providing the selected option(s). |
98+
99+ \* Object with value and label (` {value: string, label: string} ` )
96100
97101## Methods
98102
99103| Name | Parameters | Description |
100104| ------------- | --------------------- | ------------- |
101- | open | - | |
102- | close | - | |
103- | clear | - | |
104- | select | value: string |
105-
106- ## Use in forms
107-
108- TODO Move to examples
109-
110- The component can be used in an angular 2 form, just like you would use regular
111- ` input ` or ` select ` elements (the ` angular2-select ` component implements the
112- [ ControlValueAccessor] interface).
113-
114- ``` typescript
115- import {Component , OnInit } from ' @angular/core' ;
116- import {FormControl , FormGroup } from ' @angular/forms' ;
117-
118- @Component ({
119- selector: ' my-app' ,
120- template: `
121- <h1>Angular 2 select demo app</h1>
122- <form
123- [formGroup]="form">
124- <ng-select
125- [options]="options"
126- placeholder="Select one"
127- multiple="false"
128- [allowClear]="true"
129- formControlName="select">
130- </ng-select>
131- </form>
132- <hr>
133- <div>
134- Selected option id: {{form.value.select}}
135- </div> `
136- })
137-
138- export class App implements OnInit {
139-
140- form: FormGroup ;
141-
142- options = [];
143-
144- constructor () {
145- this .options = [
146- {
147- value: ' a' ,
148- label: ' Alpha'
149- },
150- {
151- value: ' b' ,
152- label: ' Beta'
153- },
154- {
155- value: ' c' ,
156- label: ' Gamma'
157- }
158- ];
159- }
160-
161- ngOnInit() {
162- this .form = new FormGroup ({});
163- this .form .addControl (' select' , new FormControl (' ' ));
164- }
165- }
166- ```
105+ | open | - | Not yet supported. |
106+ | close | - | Not yet supported. |
107+ | clear | - | Deselects all selected options. |
108+ | select | value: string | Selects the option with the given value. |
167109
168110## Develop
169111
170- Clone or fork the repository and run:
112+ Global installation of ` gulp ` and ` yarn ` are required for development. Clone or
113+ fork the repository and run:
171114
172115```
173116yarn install
@@ -176,8 +119,4 @@ gulp build
176119
177120[ angular2-select ] : https://basvandenberg.github.io/angular2-select
178121[ plunker ] : https://plnkr.co/edit/JcG8uO9nIfSGMEKdLf0Y?p=preview
179- [ angular2-select-demo ] : https://github.com/basvandenberg/angular2-select-demo
180- [ ControlValueAccessor ] : https://angular.io/docs/ts/latest/api/common/index/ControlValueAccessor-interface.html
181- [ issue ] : https://gitlab.com/pushrocks/beautylog/issues/7
182- [ beautylog ] : https://gitlab.com/pushrocks/beautylog
183122
0 commit comments