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:

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>