angular - How to use Http POST response data for md-table while getting request body from FormGroup? -

i have followed plunker retrieving data through http. want use formcontrol use input field in post request body , display response in md-table.

the issue me exampledatabase , exampledatabasesource seperate classes. know how regular http post requests in component using seperate service don't know how pass post body exampledatabase http call or pass completed service response exampledatabase can display in table?

i created example component of mean:

import {component} '@angular/core'; import {http, response} '@angular/http'; import { formcontrol, formgroup, validators, formbuilder } '@angular/forms'; import {datasource} '@angular/cdk'; import {behaviorsubject} 'rxjs/behaviorsubject'; import {observable} 'rxjs/observable'; import 'rxjs/add/operator/startwith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map';  import {testservice} './service'  @component({   selector: 'md-table-question',   templateurl: 'md-table-question.html', }) export class mdtablequestion {    displayedcolumns = ['id'];   exampledatabase: exampledatabase | null;   datasource: exampledatasource | null;   form: formgroup;    constructor(private _testservice: testservice, private _fb: formbuilder) {     this.exampledatabase = new exampledatabase();     this.datasource = new exampledatasource(this.exampledatabase);   }   ngoninit() {         this.form = this._fb.group({             name:['', validators.compose([                 validators.required                 ])],                 ]},             );  // here submit form sends post request. comes ngsubmit event:   submitform(){     let body= {name:this.form.get('name').value}     this._testservice.testrequest(body)           .subscribe(res => {             console.log(res);           })   } } export interface test {    id: number; }  export class exampledatabase {   datachange: behaviorsubject<test[]> = new behaviorsubject<test[]>([]);   data(): test[] { // not sure how data here      // let data =      // return data;   }   constructor() {     this.datachange.next(this.data);   } };  export class exampledatasource extends datasource<any> {   constructor(private _exampledatabase: exampledatabase) {     super();   }   connect(): observable<test[]> {     return this._exampledatabase.datachange;   }   disconnect() {} } } 

any @ on how great

update:

here plnkr of problem

a quick suggestion i'd do, use service true service, , implement mock version of supply application example data both testing , implementation purposes.

interface iexampleservice {     get(id: number): observable<exampleresult> }  @injectable() exampleservice implements iexampleservice {     get(id: number): observable<exampleresult> {        return observable.of( {} ) // empty object     } }  @injectable() mockexampleservice implements iexampleservice {     get(id: number): observable<exampleresult> {        return blablabla // return observable expected test data.     } } 

you can switch in module providers section load mock instead of real service.