Is there a Tags Input component for Angular?

Question

I'm looking for a specific component for Angular, something that works in a similar way of Bootstrap Tags Input

Can anyone help me finding a out-of-the-box component or providing some example of implementation? I need it for Angular 4

Mi

✔ Tagify is awesome! – Blanka

MatChips is great also – Mi

Answer 1

after i search again and again finally i find this component and it works with me it looks like MatChipsModule that used in angular material with some cool features ngx-chips

Mi

sadly, it has its bugs and its not mantained since a long time ago. – Alongshore

Answer 2

TL;DR In Angular, that type of component is named chip. Change your keyword and you will find better results.

---

There are many ways to reach it, the most common is through Angular Material.

Firstly, install Angular Material in your project following the official tutorial. Luckily it is well written and I don't think you are going to have problems.

Then, import MatChipsModule in the component you want to see the tags, in this way:

import {MatChipsModule} from '@angular/material';

and finally you can use the component in your template:

<mat-chip-list>
  <mat-chip *ngFor="let i of items" [selectable]="selectable"
           [removable]="removable" (remove)="remove(i)">
    {{i.tagName}}
    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
  </mat-chip>
</mat-chip-list>

Source: https://material.angular.io/components/chips/overview

Geology

thank you cristian but unfortunately i don't use angular material and i can't use it in this project so i will be thankful if you have another solution – Mi

if you can't use any external module then you have no many ways, you have to create it by yourself – Geology

i already use external modules but i need that tags to finish my project so i think it will be bad to include angular material for that purpose only as i'll not use it in any thing else – Mi

Luckily angular material is modular so you don't need to import the whole framework but only the piece you need :) just the essential – Geology

Don't mistake UI terminology for framework terminology. People might be using Angular but not Material. And "chip" is a name coming from Material UI, not from Angular, the application framework. – Heiney