md2/chips/chips.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-chips-container" [class.md2-chip-disabled]="disabled" [class.md2-chip-remove]="!isRemovable"><span class="md2-chip-placeholder" [class.md2-floating-placeholder]="inputValue || chipItemList.length>0">{{ placeholder }}</span> <span *ngFor="let chip of chipItemList; let i = index" class="md2-chip" [class.active]="selectedChip === i"><span>{{chip.text}}</span> <span [innerHTML]="templateHtmlString"></span> <svg (click)="removeSelectedChip(i)" width="24" height="24" viewBox="0 0 24 24" *ngIf="isRemovable"><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><ng-content select=".md2-template"></ng-content><form #chipInputForm="ngForm" class="chip-input-form"><input *ngIf="!isAutoComplete" class="chip-input" [disabled]="disabled" [type]="type" [(ngModel)]="inputValue" name="chipInput" [placeholder]="placeholder" (paste)="inputPaste($event)" (keydown)="inputChanged($event)" (blur)="inputBlurred()" (focus)="inputFocus()"><div *ngIf="isAutoComplete"><md2-autocomplete name="autocomplete" [placeholder]="chipItemList.length<1 ? placeholder: ''" [disabled]="disabled" [(ngModel)]="item" [items]="autocompleteDataList" [item-text]="autocompleteItemText" (textChange)="valueupdate($event)" (change)="changeAutocomplete($event)" (keydown)="inputChanged($event)" (click)="getFocusAutocomplete()"></md2-autocomplete></div></form></div><div class="chip-error" *ngIf="this.chipItemList.length<this.minChips">Minimum {{minChips}} chip required.</div><div class="chip-error" *ngIf="this.chipItemList.length>=this.maxChips">You are able to add Maximum {{maxChips}} chip.</div>