# Epom-ng2-custom-select
Draws custom select with single- or multi-select, searchField and linking with data FormControl

## Getting Started

### Installing

Import SelectModule into Module into module where it will be used
```javascript
import {SelectModule} from 'epom-ng2-ui-foundation';
...
imports: [
    ...
    SelectModule,
    ...
];
```
In component template declare component of custom-select;
```html
<custom-select></custom-select>
```


## Input properties (@Input)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
| **debug** | boolean | enable/disable logging selector events|
| **valuesStream** | Observable&lt;Array&lt;SelectDataObject&gt;&gt; | send values to custom-select|
| **placeholder** | string | string wich shows when nothing selected|
| **selectDefaultIndex** | number | default value by index in valuesStream|
| **selectDefaultValue** | string | default value by 'value' field in valuesStream|
| **formElement** | FormControl | link to the FormControl. After linking FormControl will receive all actions by default|
| **useClear** | boolean | Draw button with text "clear" in the bottom-right under custom-select|
| **clearLikeOption** | boolean | draw first option that implements "clear", value = placeholder|
| **disable** | boolean | if true - disables select |
| **multiple** | boolean | if true - can chouse more then one option |

## Output properties (@Output)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
| **valueChanged** | EventEmitter<any> | in this emitter you can receive all actions from custom select|

## Behaviour feature
if `selectDefaultIndex === true` and `selectDefaultValue === true`, and `formElement !== undefined` - higher priority has `selectDefaultValue`, after it - value that is in `formElement`,  and `selectDefaultIndex` at last.

Examples:
```html
<custom-select
  [valuesStream]="sizes$"
  [placeholder]="'Custom value'"
  [formElement]="creativeForm.get('size')"
  [useClear]="true"
  [clearLikeOption]="true"
  [disable]="disabledForm"
  [multiple]="false"
></custom-select>
```
