Блог

У меня есть список опций в автозаполнении мата, которые завернуты в микросхему мата. Я хочу передать событие щелчка мат-чипа в родительскую опцию мата, чтобы эта опция была выбрана в автозаполнении. Мой код шаблона таков:

 <mat-form-field class="example-chip-list" appearance="fill">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip
      disableRipple
      *ngFor="let fruit of fruits; index as i"
      [selectable]="selectable"
      [removable]="removable"
      (remove)="remove(fruit)"
    >
      <span *ngIf="!removable">{{fruit}}</span>
      <input
        *ngIf="removable"
        (keydown)="onMatChipKeyPress($event)"
        title="{{fruit}}"
        placeholder="Rename property"
        [formControl]="fruitInput2"
        (keyup.enter)="handleRename(i)"
        (blur)="handleRename(i)"
        matInput
      />
      <mat-icon matChipRemove (click)="handleEdit(i)">edit</mat-icon>
    </mat-chip>

    <input
      *ngIf="!removable"
      [placeholder]="removable ? '' : 'New fruit...'"
      #fruitInput
      [disabled]="removable"
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      (matChipInputTokenEnd)="add($event)"
    />
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      <mat-chip> {{fruit}}</mat-chip>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
 

Штакблиц здесь.