How to dynamically changedata by clicking checkbox and update table in angular2

output image

Question : How to dynamically change data by clicking checkbox(for location-chennai,mumbai and i have a separate rest for both chennai and mumbai using java backend) and display data in table and after unclicking it should back to its startingpoint.. It will be helpful if someone share your thoughts

Rowtable.component.ts


import { Component, OnInit } from '@angular/core';
import {Http} from '@angular/http';
@Component({
selector: 'app-row-table',
templateUrl: './row-table.component.html',
styleUrls: ['./row-table.component.css']
})
 export class RowTableComponent implements OnInit {
public data;
public filterQuery = "";
public rowsOnPage = 10;
public sortBy = "";
public sortOrder = "asc";
constructor(private http: Http) {
}
ngOnInit(): void {
this.http.get('http://8080/rest/jobs')
.subscribe((data)=> {
setTimeout(()=> {
 this.data = data.json();
 }, 1000);
});
}
public toInt(num: string) {
return +num;
 }
public sortByWordLength = (a: any) => {
 return a.city.length;
}
    }

rowtable.component.html

 <div class="one">
 <div class="container-fluid">   
 <div class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-  offset-2">      
 <div class="row">                               
    <div class="panel panel-default">
    <div class="panel-heading"><span class="rowtabletitle">CAREERJUST |  JOB LISTING [verified information] </span></div> 
    <table class="table table-striped" [mfData]="data | dataFilter : filterQuery" #mf="mfDataTable"
                       [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
                    <thead>   <!--           
      <tr>                 
                        <th>
                                  <mfDefaultSorter by="Companyname">Companyname</mfDefaultSorter>
                                  <mfDefaultSorter by="position"><span class="align">Position</span></mfDefaultSorter>
                                 <mfDefaultSorter by="location"><span class="align">Location</span></mfDefaultSorter>
                                 <mfDefaultSorter by="date"><span class="align">StartDate</span></mfDefaultSorter>
                        </th>                             
           </tr> -->
                  <tr>                                    
                    </tr> 
                    </thead>
                    <tbody>
                           <th colspan="1">
                            Search Jobs
                           <input class="form-control" [(ngModel)]="filterQuery"/>
                        </th>
                    <tr *ngFor="let item of mf.data">

                        <td>
                          <b>Company</b> : <br>
                          <b>Position</b> : <br>
                          <b>Location</b> : <br>
                          <b>Details</b> : <br>
                          <b>Date</b> :                   
                        </td>                 
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="5">
                            <mfBootstrapPaginator></mfBootstrapPaginator>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    </div>

checkbox.component.html

     <form  style="margin-bottom:-100px; margin-left:60px">
    <section class="form-block">
        <label><span class="searchbyfield">SEARCH BY FIELD</span>  </label>
        <div class="form-group">
            <label>Location
           <div class="checkbox">
                <input type="checkbox" id="checkrads_1">
                <label for="checkrads_1">Chennai</label>
            </div>
              <div class="checkbox">
                <input type="checkbox" id="checkrads_2">
                <label for="checkrads_2">Mumbai</label>
            </div>
            <label> Candidate

            <div class="checkbox">
                <input type="checkbox" id="checkrads_3">
                <label for="checkrads_3">Freshers</label>
            </div>
            <div class="checkbox">
                <input type="checkbox" id="checkrads_4">
                <label for="checkrads_4">Experienced</label>
            </div>
            </label>
            <label> Education             
            <div class="checkbox">
                <input type="checkbox" id="checkrads_5">
                <label for="checkrads_5">B.E/B.E TECH</label>
            </div>
            <div class="checkbox">
                <input type="checkbox" id="checkrads_6">
                <label for="checkrads_6">http://ift.tt/2lqPSkp;
            </div>
            </label>
            </label>       
        </div>       
        </section>
     </form> 

checkbox.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-checkboxpanel',
templateUrl: './checkboxpanel.component.html',
 styleUrls: ['./checkboxpanel.component.css']
 })
export class CheckboxpanelComponent implements OnInit {
constructor() { }
 ngOnInit() {
 }
 }