Chip/Tag Selector for Angular 6+

The minimalistic chip selector library for Angular. Works both with reactive and template-driven Angular forms. Supports async and sync autocompletion, binds to user defined kind of data. Easy to customize because of minmal styling.

Installation

First you need to install the npm module:

npm install ngx-chip-select --save

Usage

1. Import the ChipSelectModule:

    import { NgModule } from '@angular/core';  
    import { BrowserModule } from '@angular/platform-browser';  
    import { AppComponent } from './app.component';  
    import { ChipSelectModule } from 'ngx-chip-select';
    
    @NgModule({
	    imports: [  
	        BrowserModule,  
	        ChipSelectModule,  
	    ], 
	    bootstrap: [AppComponent]
	})
	export class AppModule { }

2. Use the ngx-chip-select component in your templates:

<ngx-chip-select></ngx-chip-select>

API

Chip Select Component

Attributes:

| Attribute name | Default value | Description | | ------------ | ------------ | ------------ | | autocomplete | none | Provide function for autocompletion. | | autocompleteProp | null | If the autocompletion function returns actual autocompletion data in a nested property, you can provide the property name with this attribute. F. e. Spring Pageable object returns data in a 'content' property of a REST response. By writing [autocomplete]="'content"' you can bind to this data. | | async | true | Flag that indicates whether autocompletion is done asyncronously. | | labelProp | 'label' | If your chips are objects, you can provide custom property that should be used to display the chip. | | valueProp | 'value' | If your chips are objects, you can provide custom property that should be used as a value of the chip. | | min | 1 | Set minimum required amount of chips. Use 0 to disable validation. | | placeholder | '+' | Set placeholder for the input field. | | simpleArray | false | Define whether your chips are objects or simple string values. | | sort | null | Provide enumeration value to sort the chips. Currently only AZ sorting is supported. TODO: allow usage of user defined functions. |