Угловой 7: Очистить выделение с помощью кнопки x в выпадающем списке

Question

Я думал, что смогу объединить примеры из Angular для выпадающего и Ввод с полем очистки до:

<mat-form-field >
  <mat-select placeholder="Country" [(value)]="selectedCountry" (selectionChange)="emitItemChanges()">
    <div *ngFor="let item of lstItems|async">
      <mat-option *ngIf="addItem(item)" [value]="item">{{item.title}}</mat-option>
    </div>
  </mat-select>
  <button mat-button *ngIf="selectedCountry" matSuffix mat-icon-button aria-label="Clear" 
    (click)="selectedCountry=undefined">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

, который работает так же, какпредназначен

, который очищает ввод.Проблема, с которой я сталкиваюсь сейчас, заключается в том, что она сразу же открывает окно выбора.Во всяком случае, как предотвратить это поведение?

Я знаю, что существуют другие решения для очистки выбора.Я хочу знать, возможен ли такой подход?

Answer 1

(click)="selectedCountry=undefined; $event.stopPropagation()" помогло!Спасибо @Sachila: -)

Таким образом, полный код выглядит так:

  <button mat-button *ngIf="selectedCountry" matSuffix mat-icon-button 
    aria-label="Clear" (click)="selectedCountry=undefined; $event.stopPropagation()">
  <mat-icon>close</mat-icon>