ngx-tags-input

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 { NgxTagsInputModule } from 'ngx-tags-input';

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

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

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

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

API

| Key | Default | Remarks | |------ |------|------| | ngModel |N/A|The variable you whish to bind your tags to. Must be an Array| | 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 | | canAddTags |true| Boolean indicating wether tags can be added 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 | |minLengthBeforeOptions|1| The length of the typed string before the dropdown is shown. Putting this to 0 will display it on focus | |scrollableOptions|false| Boolean indicator wether the user can scroll in the dropdown | |scrollableOptionsInView|5| Amount of options shown in the view when the dropdown is scrollable | | onNoOptionsMatch |N/A| Will be called on every keystroke. $event will be true when none of the given options match the entered text | | 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|

Development

Build the library

$ ng build ngx-tags-input

Run the demo app

$ ng serve demo

License

MIT © Maarten Schroeven