Welcome to NGX-TAGS-INPUT-BOX!

For Angular 17 + (standalone component)


Tags input component for angular projects (Also supports angular upto date)
Creative tags input with multiple color variance and limitable tag range.

> Ability to pass default values on tags initialization and add custom themes with css.

---

---

Import

Import the module on your your-component.component.ts file as follow.

import { NgxTagsComponent } from 'ngx-tags-input-box';

Then import the module as follow on imports array

``TS
@Component({
selector: '...',
templateUrl: '...',
styleUrls: ['...'],
standalone: true,
imports: [NgxTagsComponent]
})
`

Add this into your .html file of your component

`HTML


`TS
public tags: any[] = ['welcome', 'to', 'ngx-tags-input']; // Bind Custom Input

public displayTags(event) { // Your code goes here }
`

Custom css

`CSS
.ngx-tags-custom-css { // Your styles go here }
`

Add css for above css _class_ in order to modify the input.

Inputs & Variants

This are the methods available with ngx-tags-input-box use it as per your requirement:

- mode: (required) value should be primary | success | danger | info | warning | light

- limit: (required) value should be 0 - n (default 25)

- placeholder: (required) value should be any text...

- header: (optional) value should be any text...

- tags: (optional) tags [1,2,3,4,5,6] array in order to pass value.

- rounded: true (or) false

- disabled: true (or) false

- distinct: true - do not allow duplicate

Code integration

To use this package as a service npm i ngx-tags-input-box install this on the root angular project .

Using

After importing this library with npm install ngx-tags-input-box, go to the component which is declared under app.module.ts and integrate as below.

> Note: Don't forget to run this commend npm i ngx-tags-input-box` on root folder or else it will throw error.

---

---