chip-autocomplete

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

code: stackblitz

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:

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

<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		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