ngx-choices
Angular 4+ typehead to search and select multiple tags.
Peer dependencies
"@angular/core": ">4.3.0",
"@angular/forms": ">4.3.0",
"@angular/common": ">4.3.0",
Installation
npm i -S ngx-choices@latest
Import module
import { NgxChoicesModule } from ' ngx-choices ' ;
@ NgModule ( {
imports : [
BrowserModule ,
FormsModule ,
ReactiveFormsModule ,
HttpClientModule ,
NgxChoicesModule
] ,
providers : [ ] ,
bootstrap : [ AppComponent ]
} )
Use cases
Inside form as form control
< div class = " container " >
< form # f = " ngForm " ( ngSubmit )= " submit(f) " >
< div class = " form-group " >
< label > Enter email address(es) </ label >
< ngx-choices name = " choices " [ items ]= " items " [ config ]= " config " [( ngModel )]= " choices " required multiple > < / ngx-choices >
</ div >
< button type = " submit " [ disabled ]= " !f.valid " > Submit </ button >
</ form >
</ div >
Independent component
< ngx-choices name = " choices " [ items ]= " items " [ config ]= " config " ( onChange )= " changed($event) " ( onType )= " typed($event) " ( onError )= " erred($event) " multiple > < / ngx-choices >
Nomenclature
items (binding)
Dropdown items to choose choice from.
config (binding)
ngx-choices
configuration object of type NGX_CHOICES_CONF
.
onChange (event)
When user adds or removes choices. Emits changed values.
onType (event)
When user types inside input box to search from items or to add custom value. Emits typed value.
onError (event)
Sends alert notification occured during user interactions.
multiple (attr)
User will be able to select multiple choices.
disabled (attr)
To disable user interaction, just like when button or form control is disabled.
interface
interface NGX_CHOICES_CONF {
mode ? : NGX_CHOICES_MODE ;
value ? : string ;
label ? : string ;
meta ? : string ;
avatar ? : string ;
avatar_url ? : string ;
unique ? : boolean ;
filter ? : boolean ;
remoteFilter ? : {
url : string ;
queryParams ? : HttpParams ;
headers ? : HttpHeaders ;
searchParam ? : string ;
} ;
placeholder ? : string ;
pattern ? : RegExp ;
minLength ? : number ;
maxLength ? : number ;
maxSelections ? : number ;
hideInputOnMaxSelections ? : boolean ;
acceptUserInput ? : boolean ;
style ? : {
minInputWidth ? : string ;
choiceElementHeight ? : string ;
choiceBorderRadius ? : string ;
}
}
interface NGX_CHOICES_ERROR {
type : string ;
msg : string ;
}
enum
enum NGX_CHOICES_MODE {
NORMAL ,
ABSTRACT
}
constant
const REGEX_TYPES = {
ALL : / . + / ,
EMAIL : / ^ ( ( [ ^ <>() \[ \] \\ . ,;: \s @" ] + ( \. [ ^ <>() \[ \] \\ . ,;: \s @" ] + ) * ) | ( " . + " ) ) @ ( ( \[ [ 0-9 ] {1,3} \. [ 0-9 ] {1,3} \. [ 0-9 ] {1,3} \. [ 0-9 ] {1,3} \] ) | ( ( [ a-z A-Z \-0 -9 ] + \. ) + [ a-z A-Z ] {2,} ) ) $ / ,
LETTERS_ONLY : / ^ [ a-z A-Z ] + $ / ,
INT_ONLY : / ^ \d + $ / ,
FLOAT_ONLY : / ^ - ? \d * ( \. \d + ) ? $ /
} ;
const KEY_CODES = {
backspace : 8 ,
enter : 13 ,
up : 38 ,
down : 40
} ;
const DEFAULT_CONF : NGX_CHOICES_CONF = {
mode : NGX_CHOICES_MODE . NORMAL ,
value : ' id ' ,
label : ' name ' ,
meta : null ,
avatar : null ,
avatar_url : null ,
unique : true ,
filter : false ,
remoteFilter : null ,
placeholder : ' Type to enter value ' ,
pattern : REGEX_TYPES . ALL ,
minLength : 1 ,
maxLength : 100 ,
maxSelections : 100 ,
hideInputOnMaxSelections : false ,
acceptUserInput : true ,
style : {
minInputWidth : ' 150px ' ,
choiceElementHeight : ' 22px ' ,
choiceBorderRadius : ' 12px ' ,
}
} ;
Copyrights
Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". We would appreciate if you contact us at thatisuday@gmail.com
(if you are a business, institution or organization) so that we can mention your name in users list on this page.