Implementing filter for table in angular 2 based o

Question

I am trying to implement search option for my table created using angular material.

I have taken a input with Account ID and Department dropdown .I have implemented HTTP get service to fetch data from json file into my Department dropdown.

I able to fetch data in to my table from the json file using the get request.

But as I enter the value in my input field and click on search ,it should list me the rows with entered account id.

I have implemented the search event on Search button ,but I am unable to filter based on Account id..

Below shown is my account.component.ts

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 => {
     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<Element>(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[] = [];

This is my account.component.html

<mat-toolbar color="primary" style="width:100%"> WELCOME </mat-toolbar><br/>

<table>
  <tr><td> Account ID</td>
<td>
  <mat-form-field>
    <input matInput placeholder=" " [(value)]="acc_id">
  </mat-form-field><br/>
</td>
&emsp;&emsp;&emsp;&emsp;
<td>Department</td>
<td>
        <mat-form-field>
                      <mat-select style="min-width: 200px;" placeholder="Type to search" [(value)]="department">
                      <input class="input1" matInput type="text" [(ngModel)]="filtertext" >
                        <mat-option *ngFor="let dep of departments  | filter:filtertext  " [value]="dep.department" >
                          {{ dep.department }}
                        </mat-option>
                      </mat-select>
                    </mat-form-field>
</td>

</table>
 <br/><br/>
 <button mat-raised-button color="primary" (click)="search($event.target.value[0],department)">Search </button>

<!-- Table starts here -->

<mat-card>
<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource1">

    <!-- Account No. Column -->
    <ng-container matColumnDef="acc_id">
      <mat-header-cell *matHeaderCellDef> Account ID. </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell>
    </ng-container>

    <!-- Account Description Column -->
    <ng-container matColumnDef="acc_des">
      <mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.acc_des}} </mat-cell>
    </ng-container>

    <!-- Investigator Column -->
    <ng-container matColumnDef="investigator">
      <mat-header-cell *matHeaderCellDef> Investigator </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.investigator}} </mat-cell>
    </ng-container>

    <!-- Account CPC Column -->
    <ng-container matColumnDef="CPC">
      <mat-header-cell *matHeaderCellDef> Account CPC </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.CPC}}</mat-cell>
    </ng-container>

     <!-- Location Column -->
    <ng-container matColumnDef="location">
      <mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.location}}</mat-cell>
       </ng-container>


     <!-- Client Dept ID Column -->
    <ng-container matColumnDef="dept_id">
      <mat-header-cell *matHeaderCellDef> DeptID </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.dept_id}}</mat-cell>
       </ng-container>


    <!-- Dept Description Column -->
    <ng-container matColumnDef="deptdesc">
      <mat-header-cell *matHeaderCellDef> Dept Description </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.deptdesc}}</mat-cell>
       </ng-container>


    <mat-header-row *matHeaderRowDef="displayedColumns1" ></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns1;"></mat-row>
  </mat-table>

  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]">
  </mat-paginator>
</div>
</mat-card>

This is my accountdetails.json fle

[
    {
        "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"
    }

]

As I enter the account id and click on search ,its giving me the following error as shown below in the image

can anybody please guide me how can implement search functionality with the entered input...?

Answer 1

In account.component.html replace existing form field with following.

  <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>

Following will be the implementation in account.component.ts

applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource1.filter = filterValue;
  }

Answer 2

To Filter on specific field change the default filter

this.dataSource1.filterPredicate = 
  (data: Element, filter: string) => data.acc_id.indexOf(filter) != -1;