title: Implement a search filter for the <mat-select> component of angular material
body: <p>Trying to implement a simple application in angular 2 using angular material.<br>I implemented a simple table with pagination .</p>
  
  <p>I also used <code>mat-select</code> component, but for this i want implement a search filter to type and search the required option from the list.</p>
  
  <h2>Below shown is my .html file</h2>
  
  <pre><code>&lt;table&gt;
   &lt;tr&gt;&lt;td&gt; Department&lt;/td&gt;
  &lt;td&gt;
    &lt;mat-form-field&gt;
    &lt;mat-select placeholder=" "&gt;
      &lt;mat-option&gt; &lt;/mat-option&gt;
      &lt;mat-option *ngFor="let dep of dept" [value]="dep"&gt;{{dep}}&lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;&lt;br/&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  
  &lt;/table&gt;
  
  &lt;br&gt;&lt;br&gt;
  
  &lt;button &gt;Search&lt;/button&gt;
  
  &lt;button &gt;Reset&lt;/button&gt;
  
  &lt;button &gt;Close&lt;/button&gt;
  
  
  &lt;mat-card&gt;
  &lt;div class="example-container mat-elevation-z8"&gt;
    &lt;mat-table #table [dataSource]="dataSource"&gt;
  
      &lt;!-- Account No. Column --&gt;
      &lt;ng-container matColumnDef="accno"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account No. &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.accno}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Account Description Column --&gt;
      &lt;ng-container matColumnDef="accdesc"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account Description &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.accdesc}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Investigator Column --&gt;
      &lt;ng-container matColumnDef="investigator"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Investigator &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.investigator}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Account CPC Column --&gt;
      &lt;ng-container matColumnDef="accCPC"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account CPC &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.accCPC}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
       &lt;!-- Location Column --&gt;
      &lt;ng-container matColumnDef="location"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Location &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.location}} &lt;/mat-cell&gt;
         &lt;/ng-container&gt;
  
  
   &lt;!-- Client Dept ID Column --&gt;
      &lt;ng-container matColumnDef="cdeptid"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; ClientDeptID &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.cdeptid}} &lt;/mat-cell&gt;
         &lt;/ng-container&gt;
  
  
          &lt;!-- Dept Description Column --&gt;
      &lt;ng-container matColumnDef="depdesc"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Dept Description  &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.depdesc}} &lt;/mat-cell&gt;
         &lt;/ng-container&gt;
  
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
    &lt;/mat-table&gt;
  
    &lt;mat-paginator #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10, 20]"&gt;
    &lt;/mat-paginator&gt;
  &lt;/div&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <h2>Below shown is my .ts file</h2>
  
  <pre><code>import {Component, ViewChild} from '@angular/core';
  import {MatPaginator, MatTableDataSource} from '@angular/material';
  
  @Component({
    selector: 'app-account',
    templateUrl: './account.component.html',
    styleUrls: ['./account.component.scss']
  })
  
  export class AccountComponent {
  
  
  
    dept = [
      'Administrative Computer',
      'Agosta Laboratory',
      'Allis Laboratory',
      'Bargaman Laboratory',
      'Bio-Imaging Resource Center',
      'Capital Projects',
      'Casanova Laboratory',
      'Darst Laboratory',
      'Darnell James Laboratory',
      'Deans Office',
      'Energy Consultant',
      'Electronic Shop',
      'Facilities Management',
      'Field Laboratory'
    ];
  
  
    displayedColumns = ['accno', 'accdesc', 'investigator', 'accCPC','location','cdeptid','depdesc'];
    dataSource = new MatTableDataSource&lt;Element&gt;(ELEMENT_DATA);
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
  
     ngAfterViewInit() {
      this.dataSource.paginator = this.paginator;
    }
  }
  
  export interface Element {
    accno: number;
    accdesc: string;
    investigator: string;
    accCPC: string;
    location:string;
    cdeptid: number;
    depdesc: string;
  }
  
  const ELEMENT_DATA: Element[] = [
    {accno: 5400343, accdesc: 'ASTRALIS LTD', investigator:'Kruger, James G.', accCPC: 'OR',location:'ON',cdeptid: 110350,depdesc: 'Kruger Laboratory'}
  
    ];
  </code></pre>
  
  <p>can anybody please help me to implement search filter with mat-select component in my application?</p>