Angular 7: Clear selection with x-button on a dropdown box

Question

I thought I can combine the examples from Angular for dropdown and the Input with clear box to:

<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>

Which works close to the way as intended

which clears the input. The problem I'm facing now is that it immediately opens the selection box. Anyway how to prevent this behaviour?

I know there exists other solutions for clearing the selection. I want to know if this approach is possible?

Answer 1

(click)="selectedCountry=undefined; $event.stopPropagation()" helped! Thx to @Sachila :-)

So the full code looks like:

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

Answer 2

Example for Reactive Forms

$event.stopPropagation() - doesn't open select again

       <mat-form-field>
         <mat-select formControlName="team" placeholder="Team">
           <mat-option *ngFor="let team of availableTeams" [value]="team.id">{{team.name}}</mat-option>
         </mat-select>
         <button *ngIf="form.controls.team.value"
                 matSuffix
                 mat-icon-button
                 type="button"
                 aria-label="Clear"
                 (click)="form.controls.team.setValue(null); $event.stopPropagation()">
           <mat-icon>close</mat-icon>
         </button>
        </mat-form-field>