20 lines
1003 B
HTML
20 lines
1003 B
HTML
<mat-form-field [appearance]="appearance">
|
|
<mat-label>{{placeholder}}</mat-label>
|
|
<mat-chip-grid #tagList>
|
|
<mat-chip-row *ngFor="let tag of tags" [removable]="true" (removed)="removeTag(tag)">
|
|
<mat-icon inline="true">tag</mat-icon>{{tag}}
|
|
<button matChipRemove>
|
|
<mat-icon>cancel</mat-icon>
|
|
</button>
|
|
</mat-chip-row>
|
|
<input *ngIf="max == 0 || !tags || tags.length < max" #tagsInput [formControl]="searchFormControl"
|
|
[matAutocomplete]="auto" [matChipInputFor]="tagList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
|
(matChipInputTokenEnd)="addInputTag($event)">
|
|
<mat-hint *ngIf="max > 1" align="end">{{tags && tags.length || 0}}/{{max}}</mat-hint>
|
|
</mat-chip-grid>
|
|
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="addOptionTag($event)">
|
|
<mat-option *ngFor="let option of searchTags | async" [value]="option">
|
|
<mat-icon inline="true">tag</mat-icon>{{option}}
|
|
</mat-option>
|
|
</mat-autocomplete>
|
|
</mat-form-field> |