[![screenshot of my partially completed assignment](https://i.stack.imgur.com/6DTAb.jpg)](https://i.stack.imgur.com/6DTAb.jpg)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

The problem statement is:
Banks Search Application

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.

Here's the backend API to get a list of banks: <https://vast-shore-74260.herokuapp.com/banks?city=MUMBAI> 

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)

I tried using filters as desctibed in this url:<https://codeburst.io/create-a-search-pipe-to-dynamically-filter-results-with-angular-4-21fd3a5bec5c>

but this cant be implemented on a bootstrap table

**home.component.ts**

```
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=>{
            console.log('logging data');
            console.log(data);
            this.nativeBranch = data;
            console.log(this.nativeBranch)
         },
         error=>{
            console.log('Some error occured');
            console.log(error.errorMessage);
         }
      )
   }
}

```

**home.component.html**

```
<div class="container">
  <div class="row">
    <br>

    <div class="col-md-4">
      <form>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon">
              <i class="glyphicon glyphicon-search"></i>
            </div>
            <input type="text" class="form-control" name="searchString" placeholder="Type to search..."
              [(ngModel)]="searchString" />
          </div>
        </div>
      </form>
    </div>
    <div class="col">

      <div class="table-responsive">

        <table class="table  table-striped css-serial">
          <thead>
            <tr>
              <th scope="col">Sl.No.</th>
              <th scope="col">City</th>
              <th scope="col">Bank Name</th>
              <th scope="col">IFSC</th>
              <th scope="col">Branch</th>
              <th class="w-15" scope="col">Bank ID</th>
              <th scope="col">District</th>
              <th scope="col">State</th>
              <th class="w-15" scope="col">Address</th>
            </tr>
          </thead>
          <tbody>
            <tr style="align-self: center" *ngFor="let native of nativeBranch | filter : 'name' : 
searchString; let i = index">
              <td> </td>
              <td>{{native.city}}</td>
              <td>{{native.bank_name}}</td>
              <td>{{native.ifsc}}</td>
              <td>{{native.branch}}</td>
              <td>{{native.bank_id}}</td>
              <td>{{native.district}}</td>
              <td>{{native.state}}</td>
              <td>{{native.address}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

```

**sharedmodule that is servicecomponent**
**bankhttpservice**

```
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;
  }
}   

```

[![enter image description here](https://i.stack.imgur.com/6DTAb.jpg)](https://i.stack.imgur.com/6DTAb.jpg)