Skip to content

Commit 14294c7

Browse files
author
Bastiaan van den Berg
committed
Update readme.
1 parent 299794e commit 14294c7

File tree

1 file changed

+22
-83
lines changed

1 file changed

+22
-83
lines changed

README.md

Lines changed: 22 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ npm install --save angular2-select
2222

2323
For 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';
4040
import {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

6161
In `systemjs.config.js` add `angular2-select` to map and package:
6262

6363
```javascript
6464
var map = {
65-
// others...,
6665
'angular2-select': 'node_modules/angular2-select'
6766
};
6867

6968
var 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
```
173116
yarn 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

Comments
 (0)