Ng2-tags-input NPM

ng2-tags-input

RENAMED TO ngx-tags-input

You can find the new package here. Also al further devolpment will be done there.

Disclaimer

This package is still under active development and might undergo heavy (breaking) changes. please be aware of this when using it.

Installation

To install this library, run:

$ npm install ngx-tags-input --save

Consuming the library

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library
import { TagsInputModule } from 'ngx-tags-input/dist';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify the library as an import
    TagsInputModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library is imported, you can use it in your code

...
<tags-input class="form-control input-lg" (onTagsChanged)="onTagsChanged($event)" [removeLastOnBackspace]="removeLastOnBackspace" [(ngModel)]="tags" name="tags"></tags-input>
...

API

Key	Default	Remarks
`ngModel`	N/A	The variable you whish to bind your tags to. Must be an Array
`onTagsChanged`	N/A	Will be called when a change is made to the tags `$event` will have the following structure: `{change: 'add', tag: {}}` where `change` can be `add` or `remove`
`onMaxTagsReached`	N/A	Will be called when the maximum amount of tags has been reached
`removeLastOnBackspace`	`false`	Boolean indicating that you can remove the last tag in the row when you press backspace in the input area when it is empty
`canDeleteTags`	`true`	Boolean indicating wether tags can be removed or not
`placeholder`	`''`	Placeholder text to display when not tags are present
`maxTags`	N/A	maximum number tags allowed to select
`options`	N/A	List of selectable options to add via the typeahead. Can be Array of strings, objects or an Observable for external matching process
`displayField`	`'displayValue'`	Name of the property to show in the dropdown
`onNoOptionsMatch`	N/A	Will be called on every keystroke. `$event` will be `true` when none of the given options match the entered text