angular2-tag-input-k

angular2-tag-input

Tag input component for Angular 2

Demo & Examples

View Demo

Quick Start

npm install angular2-tag-input --save

// In one of your application NgModules
import {RlTagInputModule} from 'angular2-tag-input';

@NgModule({
  imports: [
    RlTagInputModule
  ]
})
export class YourModule {}

// In one of your component templates
<rl-tag-input [(ngModel)]="tags" placeholder="Testing placeholder"></rl-tag-input>

<rl-tag-input [(ngModel)]="tags"
placeholder="Testing placeholder"
[inputItemClasses]="['foo', 'foo2']"
[formClasses]="['foo', 'foo2']"
[autoCompleteListClasses]="['foo', 'foo2']"
></rl-tag-input>

API

Inputs

Name	Type	Default	Description
addOnBlur	boolean	true	Whether to attempt to add a tag when the input loses focus.
addOnComma	boolean	true	Whether to attempt to add a tag when the user presses comma.
addOnEnter	boolean	true	Whether to attempt to add a tag when the user presses enter.
addOnPaste	boolean	true	Whether to attempt to add a tags when the user pastes their clipboard contents.
addOnSpace	boolean	true	Whether to attempt to add a tags when the user presses space.
allowDuplicates	boolean	false	Allow duplicate tags.
allowedTagsPattern	RegExp	/.+/	RegExp that must match for a tag to be added.
autocomplete	boolean	false	Toggle autocomplete mode on/off
autocompleteItems	string[]	[]	List of suggestions for autocomplete menu
autocompleteMustMatch	boolean	true	Whether a tag must be present in the suggestions list to be valid
autocompleteSelectFirstItem	boolean	true	Pre-highlight the first item in the suggestions list
placeholder	string	'Add a tag'	Placeholder for the <input> tag.

Outputs

Name	Type Emitted	Description
addTag	string	Emits the added tag string
removeTag	string	Emits the removed tag string