Ionic2-tags-input NPM

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

Gif

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