ngx-cli-lib-tag-input

Tag Input for Angular

This is a component for Angular 2+.

Getting Started

npm i ngx-cli-lib-tag-input

Configuration

Ensure you import the module and the dependencies:

import { NgxCliLibTagInputModule } from 'ngx-cli-lib-tag-input';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
   imports: [
       NgxCliLibTagInputModule, 
       BrowserModule,
       FormsModule,
       ...OtherModules 
   ]
})
export class AppModule {}

Inputs (optional)

---

tagList - ?string[] - Accepts an array of strings as input.

tagInputValue - [?string] - Value of the input.

separatorsKeyCode - [13, 9, 188] - Array of numbers as keycodes, the default separetors as Tab, Enter and ',' keys.

validationRegex - [?RegExp] - Regex for input validation.

hasError - [false] - Validation result boolean.

allowRepeatedItems - [true] - Allow array repetition.

addOnFocusOut - [true] - Push to array on input focus out.

Output (optional)

---

OnListChange - [string[]] - Return the current array after value change.

Basic Example

@Component({
    selector: 'app',
    template: `
    <ngx-tag-input 
        [tagList]='items'
        [tagInputValue]='testString'>
    </ngx-tag-inputt>
    `
});
export class App {
    items = ['Pizza', 'Pasta', 'Parmesan'];
    testString= "test";
}

 <ngx-tag-input 
        [tagList]='items'
        [tagInputValue]='testString'>
</ngx-tag-inputt>