# chip-autocomplete

> Angular chip-autocomplete Reactive Form Control where you can create chips with autocomplete with clientside and server side option filtering

Latest version **1.0.6** (published 2020-03-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install chip-autocomplete
pnpm add chip-autocomplete
yarn add chip-autocomplete
bun add chip-autocomplete
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2020-03-29 |
| First published | 2020-03-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 261.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Md. Rafee |
| Maintainers | md.rafee |
| Keywords | angular, chips, autocomplete, angular-material |

## Links

- npm: https://www.npmjs.com/package/chip-autocomplete
- Repository: https://github.com/mdrafee03/chip-autocomplete
- Issues: https://github.com/mdrafee03/chip-autocomplete/issues
- npm.io page: https://npm.io/package/chip-autocomplete

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0

## Recent versions

- 1.0.6 (latest) — 2020-03-29
- 1.0.5 — 2020-03-28
- 1.0.4 — 2020-03-22
- 1.0.3 — 2020-03-19
- 1.0.2 — 2020-03-19
- 1.0.1 — 2020-03-19

## README

## ChipAutocomplete

Angular chip-autocomplete is a Formcontrol where you can create chips with autocomplete with clientside and server side option filtering which can be used with Reactive Forms as a normal formcontrol like ```<input>``` ```<select>```
  
## Demo

### check out **[Live Demo](https://chip-autocomplete-example.stackblitz.io/)**

code: [stackblitz](https://stackblitz.com/edit/chip-autocomplete-example)

## Getting Started

    npm i chip-autocomplete

## Configuration

Install @angular/material, if you didn't installed already:

    npm add @angular/material

Ensure you import the module and the dependencies:

```javascript
import { ChipAutocompleteModule } from 'chips-autocomplete';
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
   imports: [
       BrowserModule,
       FormsModule,
       ReactiveFormsModule,
       ChipAutocompleteModule
       ...OtherModules 
   ] // along with your other modules
})
export class AppModule {}
```
## Implementation

Use the component in any component:

app.component.html
```javascript
<chip-autocomplete><chip-autocomplete>
```

You don't need ```<mat-form-field>``` around this control. It was given under the hood.

## API

| Features | Type | Default | Description |
| ------ | ------ | -----| ------|
| placeholder | string | 'Select' | String that sets the placeholder |
| maxItems | number |  null | Sets the maximum number of chips |
| removable | boolean | true | whether the chips are removable |
| required | boolean | true | whether the field is required |
| clientSideFilter | boolean | true | whether the dropdown is filtered by client side or server side. If the value is true (clientside), **options** is required. If the value is false (serverside), **filteredOptions$** Observable and **isOptionString**, **changeSearchKey** eventEmitter |
| options | Array | |  dropdown Options: Array of strings Or Array of Object|
| isOptionString | boolean | true | Whether the options are Strings or Object. In Cleint side filtering, it is not required, it can select automatically from options. But in server side filtering, it is required. |
| displayWith | string | 'value' | If the options are objects, display property of that objects is required |
| itemId | string | 'key' | if the options are objects, key property of that objects is required |
| filteredOptions$ | Observable<any[]> | | Observable that fetch filtered Options from the server. It is required if it is server side filtering |
| changeSearchKey | EventEmitter<string> | | Eventemitter with every key stroke, useful for server side filtering |
| debounceTime | number | 500 | DebounceTime for server side filtering |
| isChipAddFromInput | boolean | false | whether the text not found in dropdown is allowed to add to chips |
| isOptionCheckable | boolean | false | whether Options can be added to chips with checkbox |
| disabledSelected | boolean | true | Whether previously selected options will be disabled and prevent to select |

---
_Source: https://npm.io/package/chip-autocomplete · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._