Reset a mat-select value by clicking a button

Question

I have a mat-select dropdown for filtering data on the UI. I emit the data from the child component to the parent component with the getTeam function

Mat-Select

<mat-form-field>
  <mat-label>Select Team</mat-label>
  <mat-select (selectionChange)="getTeam($event)">
    <mat-option *ngFor="let team of teams" [value]="team.name">
      {{team.name}}
    </mat-option>
  </mat-select>
</mat-form-field>
<span class="material-icons" (click)="reset()">delete_sweep</span>

Filter logic (.ts) The getTeamQuery receives the emitted value and filters the UI data.

  videos: Video[] = videos;
  filteredVideos: Video[] = videos;

    getTeamQuery(queryEmitted: string) {
    this.videos = this.filteredVideos.filter(video => {
      return video.team === queryEmitted;
    });
  }


  **Clearing the filter selection**

  reset() {
    this.videos = videos;
  }

How can I reset the selection of the mat-select and return to the initial state, by clicking the material icon? Initial state, meaning the state where the mat-select value is the placeholder.

Nazem Mahmud Nazem Mahmud · Accepted Answer · 2020-05-04T18:28:13

Just add a normal mat-option before the loop, like following:

<mat-select (selectionChange)="getTeam($event)">
    <mat-option value="">Select a name...</mat-option>

    <mat-option *ngFor="let team of teams" [value]="team.name">
      {{team.name}}
    </mat-option>

  </mat-select>

EDIT: as per your comment, you can use ngModel for this case, like following:

html file:

<mat-select (selectionChange)="getTeam($event)" [(ngModel)]="teamInitial">
  // your code...
</mat-select>

ts file:

export class YourComponent {
   teamInitial = '';

   // you code...

   reset() {
     this.teamInitial = '';
   }
}

Reset a mat-select value by clicking a button

1 Answers