title: How to wait for service HTTP call to finish in component
body: <p>I have a service in which i'm sending HTTP request to the web api and waiting for response. I'm calling this service function in ngOnInit(). </p>
  
  <p>I want component to wait for service call to finish and depending upon the HTTP response i should redirect user.</p>
  
  <p><strong>Problem</strong>
  I call service function and component does not wait for it to finish and renders the page on screen then after 2 3 seconds it correctly redirects.. I don't want it to render..</p>
  
  <p><strong>web service</strong></p>
  
  <pre><code>isTokenValid(token: any){
  
  const body = token;
  const headers = new Headers();
  headers.append('Content-Type', 'application/json');
  return this.http.post('http://'+this.web_url+':'+this.web_port+'/api/Authentication', body, {
    headers: headers
  })
  .map((data: Response) =&gt;data.json());
  }
  </code></pre>
  
  <p><strong>service exampe code</strong></p>
  
  <pre><code>verifyAccessToken(vaildDest: String, invalidDest: String, inverse:Boolean){
  var localStorageObj = localStorage.getItem('currentUser');
  
  if(localStorageObj == null){
    // no user details present in browser
  
    if(inverse) this.router.navigate([invalidDest]);
    return;
  
  }
  
  var currentUser = JSON.parse(localStorageObj);
  var token = currentUser.AccessToken;
  var email = currentUser.Email;
  var isAccessTokenValid = false;
  console.log(token);
  var jsonStr = {
    "AccessToken": token,
    "Email": email
  }
  this.webService.isTokenValid(jsonStr)
  .subscribe(
    data =&gt; {
      isAccessTokenValid = data["AccessValidation"]; 
      console.log("TOKEN SERVICE =&gt; isValid: "+isAccessTokenValid);
      // success connection
  
      if(!isAccessTokenValid){
        // access token is not valid now we will send refresh token
        console.log("=&gt; Access token is not valid sending refresh token... ");
  
  
        if(inverse) this.router.navigate([invalidDest]);
  
      }
      else{
        // access token is valid so we can continue operation
        if(!inverse) this.router.navigate([invalidDest]);
  
      }
  
    },error =&gt; {
      console.log("Error while validating token");
  
    },
    () =&gt; {
      // 'onCompleted' callback.
      // No errors, route to new page here
  
    }
  );
   }
  </code></pre>
  
  <p><strong>Component code</strong></p>
  
  <pre><code>constructor(private router: Router, private tokenService:TokenService) { }
  
  
  ngOnInit() {
    this.tokenService.verifyAccessToken("","/welcome", true);
  
    // i want to stop it here and dont render current component until above call is finished
  }
  </code></pre>