Angular 2+ wait for method / observable to complete

Question

I need to check te back-end for authentication status, however te code completes before te observable return is finished. Which would result in an undifined. ``` canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { this.isAuthenticated(); return this.authenticated; } isAuthenticated(){ this.loginService.isAuthenticated() .subscribe(status => this.authenticated = status) } ``` How would i change this code so i wait for the observable to complete to get the authenticated status before the code returns. Note: the Angular canActivate method does not allow me to write the code as shown below: ``` canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { this.loginService.isAuthenticated() .subscribe(status => { this.authenticated = status; return this.authenticated; }); } ``` This results in the followin error: Class 'AuthGuard' incorrectly implements interface 'CanActivate'. Types of property 'canActivate' are incompatible. Type '(route: ActivatedRouteSn…

Accepted Answer

Solved the issue with async / await and promise

The LoginService first import toPromise:

```
import 'rxjs/add/operator/toPromise';
```

Then created an async method in the LoginService

```
  async isAuthenticated(){
     const response = await this.http.get('/login/authenticated').toPromise();
     return response.json();
  }
```

Then in the component:

```
async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    this.loginStatus = await this.loginService.isAuthenticated();

console.log("LOGGED IN STATUS: " + this.loginStatus);

if (this.loginStatus == true){
        return true;
    }

// not logged in so redirect to login page with the return url
    this.router.navigate(['/layout/login'], { queryParams: { returnUrl: state.url } });    
}
```

Angular 2+ wait for method / observable to complete

Solution

Problem