title: Reset a mat-select value by clicking a button
body: <p>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</p>
  
  <p><strong>Mat-Select</strong></p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;mat-label&gt;Select Team&lt;/mat-label&gt;
    &lt;mat-select (selectionChange)="getTeam($event)"&gt;
      &lt;mat-option *ngFor="let team of teams" [value]="team.name"&gt;
        {{team.name}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  &lt;span class="material-icons" (click)="reset()"&gt;delete_sweep&lt;/span&gt;
  </code></pre>
  
  <p><strong>Filter logic (.ts)</strong>
  The getTeamQuery receives the emitted value and filters the UI data.</p>
  
  <pre><code>  videos: Video[] = videos;
    filteredVideos: Video[] = videos;
  
      getTeamQuery(queryEmitted: string) {
      this.videos = this.filteredVideos.filter(video =&gt; {
        return video.team === queryEmitted;
      });
    }
  
  
    **Clearing the filter selection**
  
    reset() {
      this.videos = videos;
    }
  </code></pre>
  
  <p>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. </p>