Ionic2 Tags Input

Ionic 2 Module which 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

2. Import TagsInputModule module into your app's module.

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