0.0.2 • Published 4 years ago

ngx-chip-select v0.0.2

Weekly downloads
8
License
-
Repository
-
Last release
4 years ago

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 nameDefault valueDescription
autocompletenoneProvide function for autocompletion.
autocompletePropnullIf 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.
asynctrueFlag 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.
min1Set minimum required amount of chips. Use 0 to disable validation.
placeholder'+'Set placeholder for the input field.
simpleArrayfalseDefine whether your chips are objects or simple string values.
sortnullProvide enumeration value to sort the chips. Currently only AZ sorting is supported. TODO: allow usage of user defined functions.