How to implement 'add tag' functionality in an Angular 9 app ? - GeeksforGeeks

26 Jun, 2020
Angular makes it very easy to implement almost every functionality. In this article, we will learn how to implement add tag functionality in your angular app. Adding tags have applications in several areas like music apps, online shopping apps, etc. By using this functionality we can filter the results of a search, according to  to the need of the user.
Approach:
Angular material library provides mat-chip, which can be used to implement this functionality.
We can use it inside a form field to take input from user and update our tags list.
Once user has finished adding tags we can save the tag list.
Now we have our tag list, we can use it any way that we want.
Step by step implementation:
For the component class:
Import MatChipInputEvent from @angular/material/chips to handle the tags input event.
Import COMMA, ENTER from @angular/cdk/keycodes to add the separator keys.
Create a list which will contain all the tags entered by user.
Create your custom add and remove method to add and remove tags.
Code for the component:
import {Component} from '@angular/core';import {COMMA, ENTER} from '@angular/cdk/keycodes';import {MatChipInputEvent} from '@angular/material/chips';  @Component({  selector: 'add-tags',  templateUrl: 'tags.html',  styleUrls: ['tags.css'],})export class addTags {  /*Set the values of these properties    to use them in the HTML view.*/    visible = true;  selectable = true;  removable = true;    /*set the separator keys.*/    readonly separatorKeysCodes: number[] = [ENTER, COMMA];  /*create the tags list.*/    Tags: string[] = [];    /*our custom add method which will take    matChipInputTokenEnd event as input.*/  add(event: MatChipInputEvent): void {  /*we will store the input and value in local variables.*/      const input = event.input;    const value = event.value;      if ((value || '').trim()) {       /*the input string will be pushed to the tag list.*/         this.Tags.push(value);    }      if (input) {  /*after storing the input we will clear the input field.*/        input.value = '';    }  }  /*custom method to remove a tag.*/    remove(tag: string): void {    const index = this.Tags.indexOf(tag);      if (index >= 0)     {  /*the tag of a particular index is removed from the tag list.*/        this.Tags.splice(index, 1);    }  }}
For the HTML view:
Create a form field which will take input and display the list of tags.
There are some parameters:1.matChipInputFor: it takes the id of form field, from which we will take the input of tags.2.matChipInputSeparatorKeyCodes: It takes the value of keys which will be used as separator.3.matChipInputTokenEnd: As soon as user press separator key, this will contain the last entered tag, and we can update the tag list by our custom add method.
To remove a particular tag, add a mat-icon with matChipRemove directive.
Code for the HTML view:
<!DOCTYPE html><html>    <head>        <title>tutorial</title>    </head>    <body>        <mat-form-field class="input">            <!--this contains the list of tags-->              <mat-chip-list #taglist>                <!--set the properties for the tags-->                  <mat-chip selected color="primary"                           *ngFor="let Tag of Tags"                           [selectable]="selectable"                           [removable]="removable"                           (removed)="remove(Tag)">                    {{Tag}}                    <!--add icon with matChipRemove                            directive to remove any tag-->                      <mat-icon matChipRemove                              *ngIf="removable">cancel                  </mat-icon>                </mat-chip>                <input placeholder="Add Tags"                       [matChipInputFor]="taglist"              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"                        (matChipInputTokenEnd)="add($event)" />            </mat-chip-list>        </mat-form-field>    </body></html>
Now in the main component include this ‘add-tags’ component.
import {Component} from '@angular/core';  @Component({  selector: 'app-root',  template: `  <div style="align-items: center;">  <app-test></app-test>  </div>  `,  styleUrls: ['main.css'],})  export class AppComponent {  }
We have successfully implemented add tags functionality.
Output: Mat-chips over the form field represents the tags entered by the user.
AngularJS-Misc
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
What is AOT and JIT Compiler in Angular ?
How to bundle an Angular app for production?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills