NgxTags

Installation

To install this library, run:

$ npm install ngx-tags --save

Consuming the library

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
// Import the library
import { NgxTagsModule} from 'ngx-tags';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
 
    // Specify the library as an import
    NgxTagsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

...
<ngx-tags [options]="statesTags" [maxTags]="4" [(ngModel)]="defaultTags" [removeLastOnBackspace]="true" [canDeleteTags]="true" [canAddTags]="true" [allowDupes]="true" [onlyFromDropdown]="true"></ngx-tags>
...

API

Key	Default	Remarks
ngModel	N/A	The variable you wish 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
allowDupes	false	Boolean indicating weather tags can be duplicated
canAddTags	true	Boolean indicating wether tags can be added or not
placeholder	'add a tag'	Placeholder text to display when not tags are present
tagTemplate	N/A	pass the ngtemplate to render for each tag input
dropdownItemTemplate	N/A	pass the ngtemplate to render for each dropdown item
maxTags	N/A	maximum number tags allowed to select
onlyFromDropdown	false	only avail selection from the dropdown
clearOnBlur	true	clear input when blured out
options	N/A	should be Array of objects
tagLabel	'tagLabel'	Name of the property to show in the dropdown,tag
readonly	false	set tag to ready-only, should be added as prop to tag object
minLengthBeforeOptions	1	The length of the typed string before the dropdown is shown. Putting this to 0 will display it on focus
change	N/A	Will be called when a change is made to the tags $event will have the following structure: {type: 'add', tag: {}} where type can be add , remove , delete orupdate

Development

Build the library

$ ng build ngx-tags

Run the demo app

$ ng serve

License

MIT © Waseem Bepari