javascript - How to wait for a child component task to be completed before proceed -

this first question here, sorry if it's not structured.

i have parent component, component1, has form, , calls component2, has form. component2 has own database collection, can saved if parent component too. has input property called write, component1 set true when user click on save button.

this input been checked onchanges, component2. ngonchanges call writeondb(), , working fine.

writeondb try persists component2 form data, , emit output saved, true on success, or false on fail.

so, component2 being called this:

<component2      [write]="saveform"      (saved)="oncmp2saved($event)"> </component2> 

my submit function this:

onsubmit(form) {     // form values , save component1 object     this.cmp1 = form;      // set flag save component2 on bd     this.saveform = true;      let result = this._cmp1service.editdata(this.cmp1)      //todo: check if component2 saved form before proceed      result.subscribe(         res => _router.navigate['home'],         error => ...     ); } 

so question is, how wait component2 emit saved output?

i find answers here, think i'm not knowing how search this, cause didn't find anything.

thanks!

it looks need wait 2 things happen before continue:

1. a saved event component2
2. an event editdata()

since don't know finish first, you'll need each handler check see if other completed. like:

onsubmit(form) {     this.cmp1 = form;     this.saveform = true;     this.component2done = false;     this.component1done = false;     this._cmp1service.editdata(this.cmp1).subscribe(         res => {            this.component1done = true;            if(this.component2done) { dosomething(); }         },         error => ...     ); } oncmp2saved(result) {      this.component2done = true;      if(this.component1done) { dosomething(); } }