Search code examples
angularangular2-formsangular4-formsangular2-filtering

Angular4 search filter functionality on Entire table


Here i Implemented small search filter on a table But My Requirement is its should search whole the table not within the page?

search

<label> Search FRom Table:</label> <input (change)="someval($event.target.value)">          


someval(value){
   let data=JSON.stringify(value);
   console.log(data.length);
   this.auction.find(e=>e.uniqueid=data);
   this.GetDashBoardData();
}
GetDashBoardData(){
    var somedata= this.globalService.getBasicInfoData();
    this.auctionRequest = {    
      "loginId": this.userdata.LoginID
    }; 
    return this.httpService.dashbordTheUser2(this.auctionRequest).subscribe((response) => {
      this.auction = response.data;
}

Here i change slight like When i enter some text in textbox its fing in Array of This.auction but i dont know how can i bind this in table

<tr *ngFor="let value of pagedItems">
                     <td>{{value.name}}</td>

Solution

  • You can try this solutuion

    I have create a demo on stackblitz

    Search Pipe

    transform(value: any, args?: any): any {
        if (!args) {
          return value;
        }
        return value.filter((val) => {
          let rVal = (val.id.toLocaleLowerCase().includes(args)) || (val.email.toLocaleLowerCase().includes(args));
          return rVal;
        })
    
    }
    

    html code

    <tr *ngFor="let customer of users | customerEmailFilter:email;let i = index">
        <th scope="row">{{i+1}}</th>
        <td>{{customer.id}}</td>
        <td>{{customer.email}}</td>
    </tr>
    

    ts file code

    users=[{
        id:'123',
        email:'[email protected]'
      },{
        id:'1234',
        email:'[email protected]'
      },{
        id:'12345',
        email:'[email protected]'
      },{
        id:'123456',
        email:'[email protected]'
    }]