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.2.1/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 beprimary | success | danger | info | warning
limit
: (required) value should be0 - n
(default 25)
placeholder
: (required) value should beany text...
header
: (optional) value should beany 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