title: Angular 6 how to wait for httpclient to return
body: <p>I am trying to call a function on my flask interface from Angular 6. A function that should verify some credentials upon a click and according to the response either show an error or navigate to a page.</p>
  
  <p>Thought I can not seem to be able to find a way to wait for the response before executing the next line of code. This causes a bug where the button needs to be pressed twice for the navigation to happen.</p>
  
  <p>I tried using <code>asyc/await</code>, tried using <code>.then</code>, tried switching the <code>subscribe</code> to <code>map</code> but nothing works.</p>
  
  <p>I guess I am missing something critical.</p>
  
  <pre><code>onClick() {
      let data = {
          // some data
      }
      let response = this.login(data);
      if (response["valid"] === true) {
          this.router.navigate(['/cool_page']);
      }
  }
  
  login(data) {
      let login_data = {}
      this.httpClient.post('http://somedomain.com/login', JSON.stringify(data)).subscribe( response =&gt; {
          login_data = response;    
      });
  
      return login_data; //this remains empty
  }
  </code></pre>