43 lines
1.6 KiB
HTML
43 lines
1.6 KiB
HTML
<mat-form-field class="example-chip-list" appearance="fill">
|
|
|
|
<!-- ------------------------------------------------------------------------------------ -->
|
|
|
|
<mat-label>Centres d'intérêt</mat-label>
|
|
|
|
<!-- ------------------------------------------------------------------------------------ -->
|
|
|
|
<mat-chip-list #chipList aria-label="Fruit selection">
|
|
|
|
<mat-chip
|
|
*ngFor="let interest of myInterests"
|
|
[selectable]="selectable"
|
|
[removable]="removable"
|
|
(removed)="remove(interest)">
|
|
{{interest}}
|
|
<button matChipRemove *ngIf="removable">
|
|
<mat-icon>cancel</mat-icon>
|
|
</button>
|
|
</mat-chip>
|
|
|
|
<input
|
|
placeholder="Tapez un centre d'intérêt et pressez 'Entrer' pour l'inserer"
|
|
#tagInput
|
|
[formControl]="formControl"
|
|
[matAutocomplete]="auto"
|
|
[matChipInputFor]="chipList"
|
|
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
|
(matChipInputTokenEnd)="add($event)">
|
|
|
|
</mat-chip-list>
|
|
|
|
<!-- ------------------------------------------------------------------------------------ -->
|
|
|
|
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
|
|
<mat-option *ngFor="let interest of filteredInterests | async" [value]="interest">
|
|
{{interest}}
|
|
</mat-option>
|
|
</mat-autocomplete>
|
|
|
|
<!-- ------------------------------------------------------------------------------------ -->
|
|
|
|
</mat-form-field>
|