title: Implementing filter for table in angular 2 based on entered values
body: <p>I am trying to implement search option for my table created using angular material.</p>
  
  <p>I have taken a input with <strong>Account ID</strong> and <strong>Department</strong> dropdown .I have implemented HTTP get service to fetch data from json file into my <strong>Department</strong> dropdown.</p>
  
  <p>I able to fetch data in to my table from the json file using the get request.</p>
  
  <p>But as I enter the value in my input field and click on search ,it should list me the rows with entered account id.</p>
  
  <p>I have implemented the search event on Search button ,but I am unable to filter based on Account id..</p>
  
  <h2>Below shown is my account.component.ts</h2>
  
  <pre><code>import {Component, ViewChild, Inject, OnInit} from '@angular/core';
  import { FormControl } from '@angular/forms';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import { ReactiveFormsModule } from '@angular/forms';
  import { FormGroup } from '@angular/forms';
  import {MatPaginator, MatTableDataSource} from '@angular/material';
  import { AccountdetailService } from '../accountdetail.service';
  
  
  
  @Component({
    selector: 'app-account',
    templateUrl: './account.component.html',
    styleUrls: ['./account.component.scss']
     })
  
  
  export class AccountComponent implements OnInit {
  
   filtertext:string;
   departments : any;
   acc_id='': number;
  
  constructor( private accdetailservice: AccountdetailService ) { }
  
  
  ngOnInit(){
    this.accdetailservice.accountdetails()
    .subscribe(data =&gt; {
       this.departments = data;
       // Add this row
       this.dataSource1.data = data;
    });
  }
  
  
  
    /* Table Starts here
    ---------------------- */
  
   displayedColumns1 = ['acc_id', 'acc_des', 'investigator', 'CPC','location','dept_id','deptdesc'];
   dataSource1= new MatTableDataSource&lt;Element&gt;(ELEMENT_DATA);
  
  
  search(acc_id:number , department:string)
  {
    this.dataSource1[1]=this.acc_id;
  }
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
  
     ngAfterViewInit() {
      this.dataSource1.paginator = this.paginator;
    }  }
  
  const ELEMENT_DATA: Element[] = [];
  </code></pre>
  
  <h2>This is my account.component.html</h2>
  
  <pre><code>&lt;mat-toolbar color="primary" style="width:100%"&gt; WELCOME &lt;/mat-toolbar&gt;&lt;br/&gt;
  
  &lt;table&gt;
    &lt;tr&gt;&lt;td&gt; Account ID&lt;/td&gt;
  &lt;td&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput placeholder=" " [(value)]="acc_id"&gt;
    &lt;/mat-form-field&gt;&lt;br/&gt;
  &lt;/td&gt;
  &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;
  &lt;td&gt;Department&lt;/td&gt;
  &lt;td&gt;
          &lt;mat-form-field&gt;
                        &lt;mat-select style="min-width: 200px;" placeholder="Type to search" [(value)]="department"&gt;
                        &lt;input class="input1" matInput type="text" [(ngModel)]="filtertext" &gt;
                          &lt;mat-option *ngFor="let dep of departments  | filter:filtertext  " [value]="dep.department" &gt;
                            {{ dep.department }}
                          &lt;/mat-option&gt;
                        &lt;/mat-select&gt;
                      &lt;/mat-form-field&gt;
  &lt;/td&gt;
  
  &lt;/table&gt;
   &lt;br/&gt;&lt;br/&gt;
   &lt;button mat-raised-button color="primary" (click)="search($event.target.value[0],department)"&gt;Search &lt;/button&gt;
  
  &lt;!-- Table starts here --&gt;
  
  &lt;mat-card&gt;
  &lt;div class="example-container mat-elevation-z8"&gt;
    &lt;mat-table #table [dataSource]="dataSource1"&gt;
  
      &lt;!-- Account No. Column --&gt;
      &lt;ng-container matColumnDef="acc_id"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account ID. &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.acc_id}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Account Description Column --&gt;
      &lt;ng-container matColumnDef="acc_des"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account Description &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.acc_des}} &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="CPC"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account CPC &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.CPC}}&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="dept_id"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; DeptID &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.dept_id}}&lt;/mat-cell&gt;
         &lt;/ng-container&gt;
  
  
      &lt;!-- Dept Description Column --&gt;
      &lt;ng-container matColumnDef="deptdesc"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Dept Description &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.deptdesc}}&lt;/mat-cell&gt;
         &lt;/ng-container&gt;
  
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns1" &gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns1;"&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>This is my accountdetails.json fle</h2>
  
  <pre><code>[
      {
          "acc_id": 1,
          "acc_des": "aaa",
          "investigator": "A-I",
          "department": "A",
          "dept_id": "101",
          "deptdesc": "A",
          "CPC": "OR",
          "location": "loc1"
      },
  
      {
          "acc_id": 2,
          "acc_des": "aaa",
          "investigator": "B-I",
          "department": "B",
          "dept_id": "102",
          "deptdesc": "A",
          "CPC": "OR",
          "location": "loc2"
      },
  
      {
          "acc_id": 3,
          "acc_des": "aaa",
          "investigator": "C-I",
          "department": "C",
          "dept_id": "103",
          "deptdesc": "B",
          "CPC": "OR",
          "location": "loc3"
      },
  
      {
          "acc_id": 4,
          "acc_des": "aaa",
          "investigator": "D-I",
          "department": "D",
          "dept_id": "104",
          "deptdesc": "A",
          "CPC": "OR",
          "location": "loc4"
      },
  
      {
          "acc_id": 5,
          "acc_des": "aaa",
          "investigator": "E-I",
          "department": "E",
          "dept_id": "105",
          "deptdesc": "B",
          "CPC": "OR",
          "location": "loc5"
      }
  
  ]
  </code></pre>
  
  <p>As I enter the account id and click on search ,its giving me the following error as shown below in the image</p>
  
  <p><a href="https://i.stack.imgur.com/DC8SG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DC8SG.png" alt="enter image description here"></a></p>
  
  <p>can anybody please guide me how can implement search functionality with the entered input...?</p>