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.
- 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:
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:
- Now in the main component include this ‘add-tags’ component.
- We have successfully implemented add tags functionality.
Output: Mat-chips over the form field represents the tags entered by the user.
- Adding Angular Material Component to Angular Application
- Angular 7 | Angular Data Services using Observable
- Angular CLI | Angular Project Setup
- Routing in Angular JS using Angular UI Router
- Sequential Functionality in Node
- Zoom Functionality in ElectronJS
- ReactJS | Calculator App ( Adding Functionality )
- Expose Functionality from a Node file using exports
- Difference between Angular 4 and Angular 5
- How to use mat-icon in angular?
- Angular 4 | Introduction
- Angular 7 | Observables
- How to use bootstrap 4 in angular 2?
- Angular 8 | Introduction
- Angular 7 | Introduction
- Angular 7 | Architecture
- Angular 7 | Installation
- Angular 7 | Directives
- Angular 7 | Components
- How to use jQuery in Angular ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.