TypeScript icon, indicating that this package has built-in type declarations

3.1.3 • Public • Published


For Angular 17 + (standalone component)

ngx-tags-input-box npm version ngx-tags-input-box

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 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

  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  standalone: true,
  imports: [NgxTagsComponent]

Add this into your .html file of your component

  <ngx-tags-input [limit]="10" [placeholder]="'Add Tags...'" [mode]="'success'" [tags]="tags" [rounded]="rounded"
    [disabled]="disabled" (tagsChange)="displayTags($event)"></ngx-tags-input>
  <ngx-tags-input [limit]="10" [placeholder]="'Add Tags...'" [mode]="'primary'" [tags]="tags" [rounded]="rounded"
    [disabled]="disabled" (tagsChange)="displayTags($event)"></ngx-tags-input>
  <ngx-tags-input [limit]="10" [placeholder]="'Add Tags...'" [mode]="'info'" [tags]="tags" [rounded]="rounded"
    [disabled]="disabled" (tagsChange)="displayTags($event)"></ngx-tags-input>
  <ngx-tags-input [limit]="10" [placeholder]="'Add Tags...'" [mode]="'warning'" [tags]="tags" [rounded]="rounded"
    [disabled]="disabled" (tagsChange)="displayTags($event)"></ngx-tags-input>
  <ngx-tags-input [limit]="10" [placeholder]="'Add Tags...'" [mode]="'danger'" [tags]="tags" [rounded]="rounded"
    [disabled]="disabled" (tagsChange)="displayTags($event)"></ngx-tags-input>
  <ngx-tags-input [limit]="10" [placeholder]="'Add Tags...'" [mode]="'light'" [tags]="tags" [rounded]="rounded"
    [disabled]="disabled" (tagsChange)="displayTags($event)"></ngx-tags-input>

Add this into to your .ts file of your component

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

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

Custom 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

Code integration

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


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.

Package Sidebar


npm i ngx-tags-input-box

Weekly Downloads






Unpacked Size

34.3 kB

Total Files


Last publish


  • manoj10101996