ngx-tagify

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.

Demo

• Install
• Component
  • Usage with ngModel
  • Usage with Reactive Forms
  • Predefined values
  • Inputs
  • Outputs
• Service
• Styling
• FAQ

Install

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

Component

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.

Usage with 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.

Usage with Reactive Forms

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}

Predefined values

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>

Inputs

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.

Outputs

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

Service

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

Styling

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;

Usage with Bootstrap

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}

FAQ

I'm getting TS compilation error!

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}

I'm getting build error because stylesheet could not be found!

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