md2/tags/tags.html

Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Chips(Tags), Collapse, Colorpicker, Data Table, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.

<div class="md2-tags-container"><span *ngFor="let t of _items; let i = index;" class="md2-tag" [class.active]="_selectedTag === i" (click)="_selectTag(i)"><span class="md2-tag-text">{{t.text}}</span> <svg (click)="_removeTagAndFocusInput(i)" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></span><div class="md2-tag-add"><input [(ngModel)]="_inputValue" type="text" tabs="false" autocomplete="off" tabindex="-1" [disabled]="disabled" class="md2-tags-input" [placeholder]="placeholder" (focus)="_onInputFocus()" (blur)="_onInputBlur()" (keydown)="_handleInputKeydown($event)" (change)="$event.stopPropagation()"><ul *ngIf="isMenuVisible" class="md2-tags-menu" (mouseenter)="_listEnter()" (mouseleave)="_listLeave()"><li class="md2-tag-option" *ngFor="let l of _list; let i = index;" [class.focused]="_focusedTag === i" (click)="_addTag($event, i)"><span class="md2-tag-option-text" [innerHtml]="l.text | highlight:_inputValue"></span></li></ul></div></div>