title: Angular wait for promise to resolve before proceeding
body: <p>My following code is part of the validation portion of a project. The purpose of this piece of code is to check if a value exists in a reference table. If does exist, then ok to proceed. If not, throw error and stop the user. </p>
  
  <pre><code>saveChanges() {
      //blah blah
      if (needTovalidate){
      passedCheck = false;
      this.validationService.checkExistence(value)
      .then((exist: boolean) =&gt; {
        passedCheck = exist;
        console.log("INSIDE: " + exist);
  
      });
      console.log("OUTSIDE: " + passedCheck);
  
      if(passedCheck) {
          //Rest of code
      } else {
          //Throw error msg
      }
  }
  
  
  public async checkExistence(value: string): Promise&lt;boolean&gt;{
    var exist = false;
    return this.getRefData().then((rec: dataModel[]) =&gt; {
      return rec.some(el =&gt; {
        return el.col1 === value;
      });
    });
  }
  
  private async getRefData() {
    return await this.configurationService.retrieveTableData().toPromise(); 
  }
  </code></pre>
  
  <p>Expected Log:</p>
  
  <pre><code>INSIDE: true
  OUTSIDE:true
  </code></pre>
  
  <p>Actual Log:</p>
  
  <pre><code>OUTSIDE: false
  INSIDE: true
  </code></pre>
  
  <p>Obviously, the code did not wait for the boolean promise to resolve before it proceeds to the next line. </p>
  
  <p>Any suggestions? </p>