ngx-tags-input-box

A tags input is a UI component which allows the user to insert multiple entries as tags into an input field. Also known as Tagging/Tokenizing system. You can find this system on most major websites.

Usage no npm install needed!

<script type="module">
  import ngxTagsInputBox from 'https://cdn.skypack.dev/ngx-tags-input-box';
</script>

README

Visit beforepost.com for awesome color palettes & extract colors and text from any source

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

Preview demo

This preview was generated with CODESANDBOX

CDN

CDN Link for ngx-tags-input-box- https://unpkg.com/ngx-tags-input-box@0.1.3/bundles/ngx-tags-input-box.umd.js

Import

Import the module on your app.module.ts file as follow.

import { NgxTagsModule} from "ngx-tags-input-box";

Then import the module as follow on imports array

NgxTagsModule

Add this into your .html file of your component

<ngx-tags-input [limit]="limit" [header]="'Add tags related to post -success'" [placeholder]="placeholder" [mode]="'success'" (tagsChange)="displayTags($event)">

Add this into to your .ts file of your component

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.

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.

Inputs & Variants

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

<ngx-tags-input [limit]="limit" [header]="header" [tags]="tags" [placeholder]="placeholder" [mode]="mode" (tagsChange)="displayTags($event)"></ngx-tags-input>

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

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.

Angular version

This library was generated with Angular CLI version version 13.0.0.

Code integration

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

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

Author

Thanks in advance

Manojkumar Muthukumar

Coimbatore Visit beforepost.com for awesome color palettes & extract colors and text from any source