Tag Input Component for Angular
This is a component for Angular >= 4. Design and API are blandly inspired by Angular Material's md-chips.
Installing the component
npm install ng4-tag-input --save
Notice: the latest version on NPM may not reflect the branch master
. Send me an email or open an issue and tag me if you need it to be published.
FAQ
Does it work with Angular Universal?
Yes.
Does it work with Angular's Ahead of time compilation (AOT)?
Yes.
Does it work with Ionic 2?
Yes.
What version does it support?
This component is supposed to work with the latest Angular versions.
If you have any issues, please do make sure you're not running a different version (or check this repo's package.json). Otherwise, please do open a new issue.
Can I change the style?
Yes - check out how to create custom themes.
Something's broken?
Please do open a new issue, but please check first that the same issue has not already been raised and that you are using the latest version :)
Configuration
Ensure you import the module:
; @ {}
Configuration for SystemJS users
Many users have reported issues with SystemJS. I got it working with the following additions to the SystemJS configuration:
// packages object 'ng4-tag-input': main: 'dist/ng4-tag-input.bundle.js' format: 'cjs' 'ng2-material-dropdown': defaultExtension: 'js' main: 'dist/ng2-dropdown.bundle.js' format: 'cjs' 'ng4-tag-input/modules/components/tag-input.template.html': defaultJSExtension: false // rest of the configuration;
API for TagInputComponent
Inputs
Model (required)
ngModel
- [string[] | TagModel[]
] - Model of the component. Accepts an array of strings as input OR an array of objects.
If you do use an array of objects, make sure you:
- define two properties,
value
anddisplay
.Value
will uniquely identify the items,display
will be the value displayed. - or, in alternative, provide the keys using the inputs
identifyBy
anddisplayBy
Notice: the items provided to the model won't change, but the items added to the model will have the format { display, value }. If you do provide identifyBy
and displayBy
, these will be used as format for the user-entered tags.
Properties (optional)
placeholder
- [?string
]
String that sets the placeholder of the input for entering new terms.
secondaryPlaceholder
- [?string
]
String that sets the placeholder of the input for entering new terms when there are 0 items entered.
maxItems
- [?number
]
Sets the maximum number of items it is possible to enter.
readonly
- [?boolean
]
Sets the tag input static, not allowing deletion/addition of the items entered.
separatorKeyCodes
- [?number[]
]
Array of keyboard keys with which is possible to define the key for separating terms. By default, only Enter is the defined key.
separatorKeys
- [?string[]
]
Array of input characters with which is possible to define the key for separating terms. Default is empty. Can use with separatorKeyCodes
, either one method matched will trigger tag separation.
transform
- [?(item: string) => string
]
A function that takes as argument the value of an item, and returns a string with the new value when appended. If the method returns null/undefined/false, the item gets rejected.
inputId
- [?string
]
Custom ID assigned to the input
inputClass
- [?string
]
Custom class assigned to the input
clearOnBlur
- [?boolean
]
If set to true, it will clear the form's text on blur events
hideForm
- [?number
]
If set to true, will remove the form from the component
onTextChangeDebounce
- [?number
]
Number of ms for debouncing the onTextChange
event (defaults to 250
)
addOnBlur
- [?boolean
]
If set to true
, will add an item when the form is blurred (defaults to false
)
addOnPaste
- [?boolean
]
If set to true
, will add items pasted into the form's input (defaults to false
)
pasteSplitPattern
- [?string
]
Pattern used with the native method split() to separate patterns in the string pasted (defaults to ,
)
blinkIfDupe
- [?boolean
]
If a duplicate item gets added, this will blink - giving the user a visual cue of where it is located (defaults to true
)
removable
- [?boolean
]
If set to false
, it will not be possible to remove tags (defaults to true
)
editable
(experimental) - [?boolean
]
If set to true
, it will be possible to edit the display value of the tags (defaults to false
)
allowDupes
- [?boolean
]
If set to true
, it will be possible to add tags with the same value (defaults to false
)
modelAsStrings
- [?boolean
]
If set to true
, all values added will be strings, and not objects (defaults to false
)
trimTags
- [?boolean
]
If set to false
, the tags could contain leading and trailing spaces (defaults to true
)
inputText
- [?string
]
Property to bind text directly to the form's value. You can use it to change the text of the input at any time, or to just bind a value. Remember: use two-way data binding with this property.
ripple
- [?boolean
]
Specified whether the ripple effect should be visible or not (defaults to true
)
Validation (optional)
validators
- [?Validators[]
]
An array of Validators (custom or Angular's) that will validate the tag before adding it to the list of items. It is possible to use multiple validators.
errorMessages
- [?Object{error: message}
]
An object whose key is the name of the error (ex. required) and the value is the message you want to display to your users
Autocomplete (optional)
onlyFromAutocomplete
- [?boolean
]
If set to true
, it will be possible to add new items only from the autocomplete dropdown
Tags as Objects (optional)
identifyBy
- [?any
]
Any value you want your tag object to be defined by (defaults to value
)
displayBy
- [?string
]
The string displayed in a tag object (defaults to display
)
Outputs (optional)
onAdd
- [?onAdd($event: string)
]
Event fired when an item has been added
onRemove
- [?onRemove($event: string)
]
Event fired when an item has been removed
onSelect
- [?onSelect($event: string)
]
Event fired when an item has been selected
onFocus
- [?onFocus($event: string)
]
Event fired when the input is focused - will return current input value
onBlur
- [?onBlur($event: string)
]
Event fired when the input is blurred - will return current input value
onTextChange
- [?onTextChange($event: string)
]
Event fired when the input value changes
onPaste
- [?onPaste($event: string)
]
Event fired when the text is pasted into the input (only if addOnPaste
is set to true
)
onValidationError
- [?onValidationError($event: string)
]
Event fired when the validation fails
onTagEdited
- [?onTagEdited($event: TagModel)
]
Event fired when a tag is edited
API for TagInputDropdownComponent
TagInputDropdownComponent is a proxy between ng4-tag-input
and ng2-material-dropdown
.
autocompleteObservable
- [(text: string) => Observable<Response>
]
A function that takes a string (current input value) and returns an Observable (ex. http.get()
) with an array of items wit the same structure as autocompleteItems
(see below). Make sure you retain the scope of your class or function when using this property.
It can be used to popuplate the autocomplete with items coming from an async request.
showDropdownIfEmpty
- [?boolean
]
If set to true
, the dropdown of the autocomplete will be shown as soon as the user focuses on the form
autocompleteItems
- [?string[] | AutoCompleteModel[]
]
An array of items to populate the autocomplete dropdown
offset
- [?string
]
Offset to adjust the position of the dropdown with absolute values (defaults to '0 0'
)
focusFirstElement
- [?boolean
]
If set to true
, the first item of the dropdown will be automatically focused (defaults to false
)
minimumTextLength
- [?number
]
Minimum text length in order to display the autocomplete dropdown (defaults to 1
)
limitItemsTo
- [?number
]
Number of items to display in the autocomplete dropdown
identifyBy
- [?string
]
Just like for tag-input
, this property defines the property of the value displayed of the object passed to the autocomplete
displayBy
- [?string
]
Just like for tag-input
, this property defines the property of the unique value of the object passed to the autocomplete
matchingFn
- [?matchingFn(value: string, target: TagModel): boolean
]
Use this property if you are not happy with the default matching and want to provide your own implementation. The first value is the value of the input text, the second value corresponds to the value of each autocomplete item passed to the component
appendToBody
- [?boolean
]
If set to false
, the dropdown will not be appended to the body, but will remain in its parent element. Useful when using the components inside popups or dropdowns. Defaults to true
.
The property autocompleteItems
can be an array of strings or objects. Interface for AutoCompleteModel
(just like TagModel)
is:
interface AutoCompleteModel value: any; display: string;
The input text will be matched against both the properties.
More options to customise the dropdown will follow.
Basic Example
@; items = 'Pizza' 'Pasta' 'Parmesan';
Advanced usage
Using an array of objects
// itemsAsObjects = [{value: 0, display: 'Angular'}, {value: 1, display: 'React'}];
identifyBy
and displayBy
Using an array of with custom // itemsAsObjects = [{id: 0, name: 'Angular'}, {id: 1, name: 'React'}];
Editable tags
Static Tags (not removable)
Max number of items
If the value of the model will contain more tags than maxItems
, maxItems
will be replaced with the current size of the model.
Autocomplete
This will accept items only from the autocomplete dropdown:
Define a template for your menu items
{{ index }}: {{ item.display }}
Populate items using an Observable
public requestAutocompleteItems = text: string: Observable<Response> const url = `https://my.api.com/search?q=`; return thishttp ;;
Additional keys to separate tags
If you want to use more keys to separate items, add them to separatorKeys as an array of keyboard key codes.
Validation
Create some validation methods in your component:
private { if controlvalue !== '@' return 'startsWithAt@': true ; return null; } private { if controlvalue !== '$' return 'endsWith$': true ; return null; } public validators = thisstartsWithAt thisendsWith$; public errorMessages = 'startsWithAt@': 'Your items need to start with "@"' 'endsWith$': 'Your items need to end with "$"' ;
Pass them to the tag-input component:
Items Transformer
Set up a transformer, which is a function that takes the item's string as parameter, and should return the transformed string.
public : string return `@`;
Every item entered will be prefixed with @
.
Events
Set up some methods that will run when its relative event is fired.
Readonly
If readonly is passed to the tag-input, it won't be possible to select, add and remove items.
Custom items template
Define your own template, but remember to set up the needed events using the input
reference.
<!-- DEFINE HERE YOUR TEMPLATE --> <!-- YOU MAY ACTUALLY DISPLAY WHATEVER YOU WANT IF YOU PASS AN OBJECT AS ITEM --> <!-- ex. item.myDisplayValue --> item: {{ item }}
Built-in Themes
If you don't like how the default theme looks, or you just need it to fit in a different design, you can choose 4 new themes: bootstrap3-info
, bootstrap
, dark
and minimal
.
If you do not like these themes, define your own theme.
Contributing/Pull Requests
Contributions are highly welcome! No, there is no guideline on how to do it. Just make sure to lint and unit test your changes. We'll figure out the rest with a couple of messages...
Ok - cool stuff. But when will you fix the issue I created?
Do please read this great post by Micheal Bromley: http://www.michaelbromley.co.uk/blog/529/why-i-havent-fixed-your-issue-yet. No, I don't have babies, but am not 24/7 coding :)