ngx-chip-select
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i ngx-chip-select

Weekly Downloads

1

Version

0.0.2

License

none

Unpacked Size

271 kB

Total Files

24

Last publish

Collaborators

  • bspqm