# Epom-ng2-tags-input
Draws custom input with Tags, searchField and linking with data FormControl

## Getting Started

### Installing

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

## Parts
    .
    |-- epom-ng2-tags-input
    |   |-- tags-input-field.module.ts
    |   |-- tags-input-field.service.ts
    |   |-- tags-input-field.types.ts
    |   |-- tags-input-field.html
    |   |-- tags-input-field.css

## Input properties (@Input)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
| **placeholder** | string | string wich shows when nothing selected |
| **separator** | string | separator to split string to array tags |
| **removeLastOnBackspace** | boolean | remove or not last tag on backspase |
| **canDeleteTags** | boolean | delete or not tags in input |
| **optionsConfig** | OptionsConfigType or null | config tags input|
| **optionsConfig.optionsSubject** | Subject<Array<any>> | subject of tags list |
| **optionsConfig.displayProperty** | string | name property in optionsSubject list, value of this property will use for tag view |
| **optionsConfig.outputProperty** | string | name property in optionsSubject list, value of this property will use as unique value of tag |
| **optionsConfig.backgroundProperty** | string | name property in optionsSubject list, value of this property will use as background for tag |


## Output properties (@Output)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
| **onTagsChanged** | EventEmitter<any> | Tag change event |
| **onMaxTagsReached** | EventEmitter<any> | Maximum tags are shown in input |

## Behaviour feature

Examples:
```html

 <tags-input
    class="form-control input-lg tags-control"
    [formControl]="dspEndpoint.controls['labelTags']"
    [separator]="';'"
    [optionsConfig] = "optionsConfig"
>
</tags-input>
```
## Contributors

Konstantin Cherniak <k.cherniak@epom.com>
