title: How to do dynamic filtering or client side filtering of a table as text is typed in a textbox
body: <p><a href="https://i.stack.imgur.com/6DTAb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6DTAb.jpg" alt="screenshot of my partially completed assignment"></a>i need to complete an assignment. the assignment should use client-side filtering of data as text is entered in text-box. how to implement it. Below is the problem statement of assignment</p>
  
  <p>The problem statement is:
  Banks Search Application</p>
  
  <p>You need to develop a single page web app (preferably, but not necessarily in AngularJS). 
  The app should list and search for banks that are fetched from the API mentioned below. There should be a dropdown for cities (just put in 5 cities in there) and there is a search bar. As I type in the search area, the table should be dynamically filtered (client-side filtering). Search should be across all fields.</p>
  
  <p>Here's the backend API to get a list of banks: <a href="https://vast-shore-74260.herokuapp.com/banks?city=MUMBAI" rel="nofollow noreferrer">https://vast-shore-74260.herokuapp.com/banks?city=MUMBAI</a> </p>
  
  <p>Essentials your applications should have: 
  bank search screen which would show a list of banks
  user should be able to search by text for the banks, across all the fields (important: there would be no search button)</p>
  
  <p>I tried using filters as desctibed in this url:<a href="https://codeburst.io/create-a-search-pipe-to-dynamically-filter-results-with-angular-4-21fd3a5bec5c" rel="nofollow noreferrer">https://codeburst.io/create-a-search-pipe-to-dynamically-filter-results-with-angular-4-21fd3a5bec5c</a></p>
  
  <p>but this cant be implemented on a bootstrap table</p>
  
  <p><strong>home.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { BankhttpService } from '../bankhttp.service';
  
  @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
     public searchString: string;  
     public nativeBranch;
  
     constructor(public bankHttpService : BankhttpService) {
        console.log('Home component constructor is called');
     }
  
  
     ngOnInit() {
        console.log('Home component onIniti called');
  
        this.bankHttpService.getBankBranches().subscribe(
           data=&gt;{
              console.log('logging data');
              console.log(data);
              this.nativeBranch = data;
              console.log(this.nativeBranch)
           },
           error=&gt;{
              console.log('Some error occured');
              console.log(error.errorMessage);
           }
        )
     }
  }
  </code></pre>
  
  <p><strong>home.component.html</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;br&gt;
  
  
      &lt;div class="col-md-4"&gt;
        &lt;form&gt;
          &lt;div class="form-group"&gt;
            &lt;div class="input-group"&gt;
              &lt;div class="input-group-addon"&gt;
                &lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;input type="text" class="form-control" name="searchString" placeholder="Type to search..."
                [(ngModel)]="searchString" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt;
  
        &lt;div class="table-responsive"&gt;
  
          &lt;table class="table  table-striped css-serial"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th scope="col"&gt;Sl.No.&lt;/th&gt;
                &lt;th scope="col"&gt;City&lt;/th&gt;
                &lt;th scope="col"&gt;Bank Name&lt;/th&gt;
                &lt;th scope="col"&gt;IFSC&lt;/th&gt;
                &lt;th scope="col"&gt;Branch&lt;/th&gt;
                &lt;th class="w-15" scope="col"&gt;Bank ID&lt;/th&gt;
                &lt;th scope="col"&gt;District&lt;/th&gt;
                &lt;th scope="col"&gt;State&lt;/th&gt;
                &lt;th class="w-15" scope="col"&gt;Address&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr style="align-self: center" *ngFor="let native of nativeBranch | filter : 'name' : 
  searchString; let i = index"&gt;
                &lt;td&gt; &lt;/td&gt;
                &lt;td&gt;{{native.city}}&lt;/td&gt;
                &lt;td&gt;{{native.bank_name}}&lt;/td&gt;
                &lt;td&gt;{{native.ifsc}}&lt;/td&gt;
                &lt;td&gt;{{native.branch}}&lt;/td&gt;
                &lt;td&gt;{{native.bank_id}}&lt;/td&gt;
                &lt;td&gt;{{native.district}}&lt;/td&gt;
                &lt;td&gt;{{native.state}}&lt;/td&gt;
                &lt;td&gt;{{native.address}}&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>sharedmodule that is servicecomponent</strong> 
  <strong>bankhttpservice</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
  import { HttpErrorResponse, HttpParams } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable'
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/do';
  
  @Injectable({
    providedIn: 'root'
  })
  export class BankhttpService {
    private baseUrl = "https://vast-shore-74260.herokuapp.com/banks";
    public myCity = "MUMBAI"
  
    constructor(private _http: HttpClient) {
      console.log('Bank http service called');
    }
  
    private handleError(err: HttpErrorResponse) {
      console.log('Handle http error');
      console.log(err.message);
      return Observable.throw(err.message);
    }
  
  
    public getBankBranches(): any {
      let myResponse = this._http.get(this.baseUrl + '?city=' +
        this.myCity);
      console.log(myResponse);
      return myResponse;
    }
  }   
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/6DTAb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6DTAb.jpg" alt="enter image description here"></a></p>