angular - How to Use Observables to update displayed data on insert -

i decided ask here i've been looking @ google whole day answer can't seem understand on how implement it. basically, want every time insert data modal once closes auto update list of parent view. in past go setting timeout function upon researching i've stumbled upon observables. want know how can implement on current setup.

here component.ts

import { component } '@angular/core'; import { navcontroller, navparams, modalcontroller,fabcontainer } 'ionic-angular'; import { modalcreatenewdirectorypage } '../../pages/modal-create-new-directory/modal-create-new-directory'; import {popupuploadcsvpage} '../../pages/popup-upload-csv/popup-upload-csv'; import { beaconrestapiprovider } '../../providers/beacon-rest-api/beacon-rest-api'; import {modalshowphonebookdirectorypage} '../../pages/modal-show-phonebook-directory/modal-show-phonebook-directory'; import { observable } 'rxjs/observable'; import { asyncpipe } '@angular/common';  /**  * generated class phonebookpage page.  *  * see http://ionicframework.com/docs/components/#navigation more info  * on ionic pages , navigation.  */   @component({     selector: 'page-phonebook',     templateurl: 'phonebook.html',  })  export class phonebookpage {      items: array<{title: string, icon:string}>;     infos:any;     fileholder:any;     choice:boolean;     contacts:any;      constructor(public navctrl: navcontroller, public navparams: navparams, public newdirectoryopenmodal:modalcontroller, public beaconprovider:beaconrestapiprovider, public uploadpopupdirectorymodal: modalcontroller, public showphonebookdirectorymodal: modalcontroller ) {          this.getphonebook();     }      ionviewdidload() {         console.log('ionviewdidload phonebookpage');     }      createnewdirectory(fab: fabcontainer){          console.log('this button creates new directory');          const showcreatedirectorymodal = this.newdirectoryopenmodal.create(modalcreatenewdirectorypage);          fab.close();          showcreatedirectorymodal.present();       }      uploadnewdirectory(fab: fabcontainer){         const showuploadpopup = this.uploadpopupdirectorymodal.create(popupuploadcsvpage);          fab.close();          showuploadpopup.present();       }       getphonebook() {         this.beaconprovider.getphonebookdirectories()         .then(data => {             this.infos = data;          }, (err) => {             console.log(err);         });     }      phonebookidentity(phonebook){         var phonebook_id = phonebook.phonebook_id;         this.beaconprovider.showphonebookdirectorylist(phonebook_id)         .then(data => {               const showdirectorylist = this.showphonebookdirectorymodal.create(modalshowphonebookdirectorypage,{list:data});              showdirectorylist.present();          }, (err) => {             console.log(err);         });     }   } 

and modal component.ts controls modal form

import { component, oninit } '@angular/core'; import { navcontroller, navparams, viewcontroller,loadingcontroller,toastcontroller} 'ionic-angular'; import { formgroup, formarray, formbuilder, formcontrol, validators } '@angular/forms'; import { beaconrestapiprovider } '../../providers/beacon-rest-api/beacon-rest-api';  /**  * generated class modalcreatenewdirectorypage page.  *  * see http://ionicframework.com/docs/components/#navigation more info  * on ionic pages , navigation.  */    @component({     selector: 'page-modal-create-new-directory',     templateurl: 'modal-create-new-directory.html',  })  export class modalcreatenewdirectorypage implements oninit  {        public createdirectoryform: formgroup;     //directoryinfo: { phonebook_name: string, number: string, personname: string, age: string, address: string} = { phonebook_name:'', number: '', personname: '', age: '', address:''};      constructor(public navctrl: navcontroller, public navparams: navparams, public newdirectoryview:viewcontroller, public formbuilder: formbuilder, public beaconprovider:beaconrestapiprovider, public pageloader: loadingcontroller, public toast : toastcontroller) {      }    /*ngoninit(){         this.createdirectoryform = this.formbuilder.group({             directoryname:['',validators.required],             fields: this.formbuilder.array([                 this.initformchild(),             ])          });     }*/      ngoninit(){         this.createdirectoryform = this.formbuilder.group({             directoryname:['',validators.required],             fields:this.formbuilder.array([                 this.initfield(),                 ])         });     }      initfield() {         return this.formbuilder.group({             number:['',validators.required],             personname: ['',validators.required],             age:['',validators.required],             address:['',validators.required],         });     }      addfield() {         const control = <formarray>this.createdirectoryform.controls['fields'];         control.push(this.initfield());     }      removefield(i: number) {         const control = <formarray>this.createdirectoryform.controls['fields'];         control.removeat(i);     }      save(form){         console.log(form);         var i;         var phonebookname = form.controls.directoryname._value;         var fields_array = [];         var record_set = [];         var fields = form.controls.fields.controls;         phonebookname = {"phonebook_name":phonebookname};         var address,age,number,personname;         var directory_header = ['number','name','age','address'];         record_set.push(directory_header);           for(i = 0; < fields.length ; ++ ){             if(fields[i]._value.address !=""){                 address = fields[i]._value.address;             }             else{                 address = '_';             }             if(fields[i]._value.age !=""){                 age = fields[i]._value.age;             }             else{                 age = '_';             }             if(fields[i]._value.number !=""){                 number = fields[i]._value.number;             }             else{                 number = '_';             }             if(fields[i]._value.personname !=""){                 personname = fields[i]._value.personname;             }             else{                 personname = '_';             }               fields_array = [number,personname,age,address];             record_set.push(fields_array);              //console.log(i.controls.number._value);             //console.log(i.controls.personname._value);         }          var phonebookdetails_array = record_set;          this.beaconprovider.getphonebookid(phonebookname).then((res) => {             var phonebookid = res;             var manual_phonebook_array = {"phonebook_id":phonebookid,"phonebook_content":phonebookdetails_array};             let loadingpage = this.pageloader.create({                 content: 'processing request...',                 showbackdrop:false             });             loadingpage.present();              this.beaconprovider.addphonebookdirectory(manual_phonebook_array).then((res)=>{                 settimeout(() => {                     loadingpage.dismiss();                     this.toast.create({                     message: `phonebook directory added`,                     duration: 3000,                     position: "top",                 }).present();                 this.closenewdirectorymodal();                 }, 5000);               },err=>{                 console.log(err);             })           }, (err) => {             console.log(err);         });        }         ionviewdidload() {         console.log('ionviewdidload modalcreatenewdirectorypage');     }      closenewdirectorymodal(){         this.newdirectoryview.dismiss();     }    } 

i think enough show want happen if not let me know.

since you're passing new directory service; can assign new directory behavioursubject in service, can return observable , subscribe component.