Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a Tags Input component for Angular?

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

like image 263
Samir Ghoneim Avatar asked Oct 06 '17 16:10

Samir Ghoneim


2 Answers

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

like image 130
Cristian Traìna Avatar answered Oct 05 '22 23:10

Cristian Traìna


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

like image 32
Samir Ghoneim Avatar answered Oct 05 '22 23:10

Samir Ghoneim