Angular 7: Clear selection with x-button on a dropdown box
(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>
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>