klngx-input-tag v0.0.1

InputTag

Input component that allow user to enter a keyword for search or value. Any value that enter sorted as a chip.

Dependencies

Angular material

Usage

It generate value as an array in formControl. options is provided externally by its compound component to generate selections, using Angular's autocomplete. What is provided in options will be pushed to formControl.

displayTagFn provide pure function to generate value tag, while displayTagTitleFn generate label of the tag.

Any input field's value change will be triggered via keywordChanges and removal of tag will be on tagRemoved.

template.html

<klngx-input-tag
  [formControl]="users"
  [options]="usersOptions"
  [displayTagFn]="userDisplayTag"
  [displayTagTitleFn]="userDisplayTitle"
  (keywordChanges)="onKeywordChange($event)"
  (tagRemoved)="onUserRemoved($event)"
  required
>
  <mat-label>Selected users</mat-label>
</klngx-input-tag>
<mat-autocomplete #usersOptions="matAutocomplete">
  <mat-option *ngFor="let item of options" [value]="item">
    {{ item.label }}
  </mat-option>
</mat-autocomplete>
<mat-error *ngIf="users.errors">{{ users.errors | json }}</mat-error>