Gathering detailed insights and metrics for ngx-tagify
Gathering detailed insights and metrics for ngx-tagify
npm install ngx-tagify
Typescript
Module System
Node Version
NPM Version
63.8
Supply Chain
92.3
Quality
81.1
Maintenance
100
Vulnerability
98.9
License
TypeScript (68.67%)
JavaScript (12.86%)
HTML (10.77%)
CSS (7.59%)
SCSS (0.11%)
Love this project? Help keep it running — sponsor us today! 🚀
Total Downloads
226,447
Last Day
354
Last Week
1,924
Last Month
8,132
Last Year
94,164
MIT License
27 Stars
143 Commits
4 Forks
2 Watchers
4 Branches
4 Contributors
Updated on Jan 06, 2025
Minified
Minified + Gzipped
Latest Version
18.0.0
Package Id
ngx-tagify@18.0.0
Unpacked Size
78.93 kB
Size
20.37 kB
File Count
16
NPM Version
10.5.0
Node Version
20.12.2
Published on
Nov 30, 2024
Cumulative downloads
Total Downloads
Last Day
11.7%
354
Compared to previous day
Last Week
10.9%
1,924
Compared to previous week
Last Month
40.4%
8,132
Compared to previous month
Last Year
32.8%
94,164
Compared to previous year
3
3
Proper Angular library that wraps @yaireo/tagify.
It allows multiple instances of tagify, implements ControlValueAccessor (for use with ngModel
and reactive forms), and includes proper type declarations.
Install via npm:
npm install ngx-tagify
Import module:
1import { TagifyModule } from 'ngx-tagify'; 2 3@NgModule({ 4 imports: [ 5 ... 6 TagifyModule, 7 ... 8 ] 9}) 10export class AppModule {}
Include styling (see below).
You can use the <tagify>
component either with ngModel
or with reactive forms.
Either way, it takes a string
or an array of TagData
, i.e. an Object
that contains a unique property value
:
1interface TagData { 2 value: string; 3 [key: string]: any; 4}
If a string is passed, it gets parsed for tags by Tagify. The returned string is the stringified tags array or, if mode: 'mix'
, the mixed text and tags string.
ngModel
Import FormsModule
to your module.
1<tagify 2 [(ngModel)]="tags" 3 inputClass="form-control" 4 [settings]="settings" 5 [whitelist]="whitelist$" 6 [readonly]="readonly" 7 [disabled]="disabled" 8 (add)="onAdd($event)" 9 (remove)="onRemove($event)" 10></tagify>
1import { Component } from '@angular/core'; 2import { BehaviorSubject } from 'rxjs'; 3import { TagData, TagifySettings } from 'ngx-tagify'; 4 5@Component({ 6 selector: 'app-root', 7 templateUrl: './app.component.html', 8 styleUrls: ['./app.component.css'] 9}) 10export class AppComponent { 11 12 tags: TagData[] = [{ value: 'foo' }]; 13 // tags = 'foo'; -> if you want to pass as string 14 15 settings: TagifySettings = { 16 placeholder: 'Start typing...', 17 blacklist: ['fucking', 'shit'], 18 callbacks: { 19 click: (e) => { console.log(e.detail); } 20 } 21 }; 22 23 whitelist$ = new BehaviorSubject<string[]>(['hello', 'world']); 24 25 readonly = false; 26 27 disabled = false; 28 29 onAdd(tagify) { 30 console.log('added a tag', tagify); 31 } 32 33 onRemove(tags) { 34 console.log('removed a tag', tags); 35 } 36 37}
Note: The component only recognizes reference changes, it won't deep check for changes within the array.
this.tags.push({value: 'bar'});
won't do anything.
Instead, use this.tags = this.tags.concat([{value: 'bar'}]);
(or similar) to update changes.
Import ReactiveFormsModule
to your module.
1<form [formGroup]="form"> 2 <tagify formControlName="tags"></tagify> 3</form>
1import { Component, OnInit } from '@angular/core'; 2import { FormControl, FormGroup } from '@angular/forms'; 3 4@Component({ 5 selector: 'app-root', 6 templateUrl: './app.component.html', 7 styleUrls: ['./app.component.css'] 8}) 9export class AppComponent implements OnInit { 10 11 form = new FormGroup({ 12 tags: new FormControl([{ value: 'Reactive' }]) 13 }); 14 15 ngOnInit(): void { 16 17 this.form.valueChanges.subscribe(value => { 18 console.log('form value changed', value); 19 }); 20 21 } 22 23}
Use ngModel
or reactive forms with an initial string value that gets parsed by Tagify.
If you want to pass predefined tags as text, but receive a tags array as output, pass the value as text between <tagify></tagify>
. Mixed text & tags are also supported.
1<tagify>tag 1, tag 2</tagify>
1<tagify [settings]="{ mode: 'mix' }"> 2 [[Eric Cartman]] and [[kyle]] do not know [[homer simpson]] because he's a relic. 3</tagify>
Angular has problems with hard-coded single curly braces. Use property binding to add predefined tags with json syntax.
1originalText = '[[{"id":200, "value":"cartman", "title":"Eric Cartman"}]] and [[kyle]] do not know [[{"value":"homer simpson", "readonly":true}]] because he\'s a relic.';
1<tagify [settings]="{ mode: 'mix' }"> 2 {{ originalText }} 3</tagify>
settings | Type: TagifySettings See tagify/Settings. |
inputClass | Type: string Apply one or more CSS classes to the input field (e.g. Bootstrap's form-control ). |
whitelist | Type: Observable<string[]|TagData[]> Execution of the observable updates the whitelist of tagify. You can listen to user's inputs and update the whitelist respectively using this observable. |
readonly | Type: boolean Dynamically change readonly status. |
disabled | Type: boolean Dynamically change disabled status. |
name | Type: string Use the name attribute if you want to access the tagify component via the service. This name should be unique. |
add | Fires when a tag has been added. |
remove | Fires when a tag has been removed. |
tInput | Listen to the input event of the tagify input element. |
Listen to all other events by defining respective callbacks (tagify/Events).
You can also gain access to the full tagify API via a service.
Provide a name
, such that the tagify instance will be available via the service.
1<tagify name="example"></tagify> 2<button (click)="addTags()">Add tags</button>
1import { Component } from '@angular/core'; 2import { TagifyService } from 'ngx-tagify'; 3 4@Component({ 5 selector: 'app-root', 6 templateUrl: './app.component.html', 7 styleUrls: ['./app.component.css'] 8}) 9export class AppComponent { 10 11 constructor( 12 private tagifyService: TagifyService 13 ) {} 14 15 addTags() { 16 this.tagifyService.get('example').addTags(['this', 'is', 'cool']); 17 } 18 19}
The original Tagify class is also exposed and can be used for type declarations or custom implementations.
1import { Tagify } from 'ngx-tagify'; 2 3const tagify: Tagify = new Tagify(inputElement);
You have two options to include the styling of Tagify.
Option 1: Modify your angular.json
by adding the .scss
file to the styles
property.
1"options": { 2 "styles": [ 3 "node_modules/ngx-tagify/styles/tagify.scss", 4 "src/styles.scss" 5 ] 6}
Option 2: If you want to override some of the styling, import it to a sass file. Have a look at tagify/CSS Variables and respective demo page for details.
1// src/styles.scss 2@import "ngx-tagify/styles/tagify"; 3 4.tagify 5 --tags-border-color: #ff0000;
If you are using Bootstrap as CSS framework (as used in the demo), you might need to tweak some styles in order that Tagify looks pretty:
1.tagify { 2 --tag-pad: 0 0.5rem; 3 line-height: 1.5; 4} 5.tagify__input:empty::before { 6 line-height: inherit; 7} 8.tagify.form-control { 9 height: unset; 10}
You are getting TypeScript compilation error with an error output like this:
node_modules/@types/yaireo__tagify/index.d.ts:475:1
475 export = Tagify;
~~~~~~~~~~~~~~~~
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
To resolve this issue, set allowSyntheticDefaultImports
within compilerOptions
in your tsconfig.json
:
1{ 2 "compilerOptions": { 3 4 "allowSyntheticDefaultImports": true, 5 6 } 7}
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
â•·
1 │ @import "@yaireo/tagify/src/tagify";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/ngx-tagify/styles/tagify.scss 1:9 root stylesheet
Make sure you include node_modules
in the stylePreprocessorOptions
within your angular.json
:
1"stylePreprocessorOptions": { 2 "includePaths": ["node_modules"] 3},
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
10 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 9
Reason
6 existing vulnerabilities detected
Details
Reason
Found 0/19 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-02-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More