Ionic 2 Module which allows to write the content in popular tags form.
- Custom labels and placeholders
- Maximum length of word restriction
- Maximum amount of items restriction
- Prevent duplicates restriction
- Callback fn after added or removed tag
npm install --save ionic2-tags-input
import { TagsInputModule } from 'ionic2-tags-input';
// import the module
@NgModule({
...
imports: [
TagsInputModule
]
})
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'
}
]
],
});
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 |
Attribute Name | Type | Description |
---|---|---|
onTagAdded | fn | Callback fn after added tag |
onTagRemoved | fn | Callback fn after removed tag |