How to add a clear icon on dropdown Angular Material?

Question

I'm trying to add a clear icon on the right side of a dropdown (select component) in Angular material only if the user selects an option. If the user clicks on the "clear" icon I want to delete the value and reset the field. So far I have the dropdown and struggling on displaying the icon properly. Can anyone point me in the right direction? thanks in advance.

Here's my code:

<mat-form-field appearance="fill">
  <mat-label>Select a food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
    <mat-select-trigger>
        <button>
           <mat-icon>clear</mat-icon>
       </button>
    </mat-select-trigger>
  </mat-select>
</mat-form-field>

Here's LIVE DEMO

Answer 1

You need to add ngModel on mat-select for two way binding to add selected value into it. Also add button as suffix of mat-select.

<mat-select [(ngModel)]="selectedFood">
    <mat-option *ngFor="let food of foods" [value]="food.value">
        {{ food.viewValue }}
    </mat-option>
</mat-select>
<button mat-button matSuffix *ngIf="selectedFood" mat-icon-button (click)="onClick($event)">
    <mat-icon>close</mat-icon>
</button>

On your component side you need to add following function to clear selected food value.

onClick(event: any) {
    this.selectedFood = "";
    event.stopPropagation();
}

event.stopPropagation() will stop mat select dropdown to be opened on cick of clean button.

Here is your working solution:

https://stackblitz.com/edit/angular-c7hgum-94nqyq

Answer 2

<mat-form-field appearance="fill">
    <mat-label>Select a food</mat-label>
    <mat-select [(ngModel)]="selectedFood">
        <mat-option *ngFor="let food of foods" [value]="food.value">
            {{food.viewValue}}
        </mat-option>
    </mat-select>
    <button mat-button *ngIf="selectedFood" matSuffix mat-icon-button aria-label="Clear" (click)="selectedFood=''">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

Answer 3

THE SOLUTION that worked fir me is given below.... using mat-select In component.ts file

import {Directive, HostListener} from "@angular/core";

@Directive({
    selector: "[click-stop-propagation]"
})
export class ClickStopPropagation
{
    @HostListener("click", ["$event"])
    public onClick(event: any): void
    {
        event.stopPropagation();
    }
}

In template call the function like this

(click)="onCLick($event)