title: multiple filterpredicate in angular 5
body: <p>So i am trying to implement multiple filter, one for searching only in username while other in searching in every field</p>
  
  <pre><code> export class MemberComponent implements OnInit {
        dataSource;
        displayedColumns: string[] = ['name', 'username', 'email', 'buttons'];
        listItems = ["Bret", "Antonette", "Samantha", "An"];
        constructor(private memSer: MemberService) { }
  
        @ViewChild(MatPaginator) paginator: MatPaginator;
        @ViewChild(MatSort) sort: MatSort;
  
        ngOnInit() {
          this.memSer.getMember().subscribe(
            (data) =&gt; {
              //this.dataSource.paginator = this.paginator;
              this.dataSource = new MatTableDataSource(data);
              this.dataSource.paginator = this.paginator;
              this.dataSource.sort = this.sort;
              this.dataSource.filterPredicate =
                (data: Element, filter: string) =&gt; {
                  return data['username'].trim().toLowerCase().indexOf(filter) != -1;
                }
  
            }
          )
  
        }
  
    applyFilter(filterValue: string) {
      console.log(filterValue);
      this.dataSource.filter = filterValue.trim().toLowerCase();
  
    }
    searchFilter(filterValue: string) {
      console.log(filterValue);
      this.dataSource.filter = filterValue.trim().toLowerCase();
  
    }
  </code></pre>
  
  <p>searchfilter is supposed to search in every field while applyfilter in only username, Is this possible in angular mat 5?</p>
  
  <p>Here's HTML</p>
  
  <pre><code> &lt;mat-form-field&gt;
      &lt;mat-select placeholder="ID" (selectionChange)="applyFilter($event.value)"&gt;
      &lt;mat-option *ngFor="let food of listItems" [value]="food"&gt;
        {{food}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  &lt;mat-form-field&gt;
    &lt;input matInput (keyup)="searchFilter($event.target.value)" placeholder="Filter"&gt;
  &lt;/mat-form-field&gt;
  &lt;div class="mat-elevation-z8"&gt;
    &lt;table matSort mat-table [dataSource]="dataSource"&gt;
  
      &lt;ng-container matColumnDef="name"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Name&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let member"&gt;{{member.name}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="username"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;UserName&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let member"&gt;{{member.username}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="email"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Email&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let member"&gt;{{member.email}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="buttons"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Buttons&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let member"&gt;&lt;span (click)="hello(member.name)"&gt;Hello&lt;/span&gt;&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
  
    &lt;/table&gt;
    &lt;mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can i even create different filter for different fields? </p>