title: angular: wait for asynchronous data
body: <p>I am using Angular and trying to validate the user credentials for a login page in my service.ts file by sending the request to a backend. I want to wait for the server response in my component.ts file but, I am unable to do so.</p>
  <p>Here's my code:</p>
  <blockquote>
  <p>Service.ts</p>
  </blockquote>
  <pre><code>check_authentication(mail: string, passcode: string)
  {
    const params = new HttpParams().set('id', mail).set('id2', passcode);
  
    this.http.post('http://localhost:3000/login', this.test, {params, responseType: &quot;text&quot;})
    .subscribe(responseData =&gt; {
      if(responseData == 'Authorized')
      {
          this.check = true;
  
      }
      else
      {
          this.check = false;
  
      }
    }
    ,error =&gt; {
      console.log(&quot;Error occurred while trying to login &quot;+ error.message);
    });
  }
  
  isAuthenticated() : boolean
  {
    return this.check;
  }
  </code></pre>
  <blockquote>
  <p>Component.ts</p>
  </blockquote>
  <pre><code>onSubmit()
  {
    
    this.auth.check_authentication(this.mail, this.code);
  
    //this if-else block isn't executing as somehow the response from the server isn't there yet.
    //I want to wait for the response here
    if(this.auth.isAuthenticated() == true)
    {
      console.log(&quot;submit button called here&quot;);
  
      this.router.navigateByUrl('/home');
    }
     
    else if(this.auth.isAuthenticated() == false)
    {
      this.unAuthorized = true; //as I am throwing an alert if user login fails
    }
  
     console.log(&quot;Printing this to see if this function is being called correctly&quot;); //this executes 
  }
  </code></pre>
  <p>Any help would be appreciated.</p>