2.0.1 • Published 5 years ago
ngx-tags-input v2.0.1
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