Ionic2 Tags Input
Ionic 2 Module that allows to write the content in popular tags form.
Features
- Custom labels and placeholders
- Maximum length of word restriction
- Maximum amount of items restriction
- Prevent duplicates restriction
- Callback fn after added or removed tag
Installation
1. Install the NPM Package
npm install --save ionic2-tags-input
TagsInputModule
module into your app's module.
2. Import import { TagsInputModule } from 'ionic2-tags-input';
// import the module
@NgModule({
...
imports: [
TagsInputModule
]
})
Usage
Bind component to formControl or ngModel
<tags-input formControlName="animals"></tags-input>
Form structure
public animals:FormGroup = this.formBuilder.group({
animals: [
[
{
'name': 'Gazelle'
},
{
'name': 'Cat'
}
]
],
});
@Inputs / Attributes
Name | Type | Description | Default Value |
---|---|---|---|
maxTags | number | Number of tags allowed. If maximum value is achieved, add button becomes disabled | N/A |
maxWordLength | number | Maximum length of the word/sentence | N/A |
allowDuplicates | boolean | Allow duplicates | false |
buttonLabel | string | Add button label | Add |
alertTitleLabel | string | The title of alert | Add item |
alertInputPlaceholder | string | Placeholder of the input inside the alert modal | Type text |
alertButtonLabel | string | Label of the alert button | OK |
wordLengthRestrictionMsg | string | Text displayed if word is too long | Error: This word is too long |
duplicatesRestrictionMsg | string | Text displayed if user is trying to make a duplicate | Error: Duplicates are not allowed |
@Outputs
| Attribute Name | Type | Description | | --- | --- | --- | --- | | onTagAdded | fn | Callback fn after added tag | onTagRemoved | fn | Callback fn after removed tag