title: Angular CanActivate With Login Dialog
body: <p>I have an <code>AuthGuard</code> in which I want to use a login <code>material2</code> dialog with it.  So before <code>canActivate</code> returns, the login dialog is shown and if the login is successful then the dialog returns <code>true</code> so then <code>canActivate</code> returns <code>true</code> as well.  If the login is not successful, then the dialog does not return anything and tries again. </p>
  
  <p>I have already implemented the dialog in a <code>component</code> and its working fine,  I'm looking for help on how to integrate it with the <code>canActivate</code> guard.</p>
  
  <pre><code>@Injectable()
  export class AuthGuard implements CanActivate {
  
      constructor(private authService: AuthService, 
              private dialog: MatDialog,
              private router: Router) {}
  
      successfulLogin: boolean;
  
      canActivate(
          next: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable&lt;boolean&gt; | Promise&lt;boolean&gt; | boolean {
  
         // Open the Dialog
         let dialogRef = this.dialog.open(LoginDialog, {
              width: '450px',
              data: { success: this.successfulLogin }
          });
  
          // NEED HELP HERE, UNSURE HOW TO RETURN
          return dialogRef.afterClosed().subscribe(result =&gt;{
              return result;
          })
      }
  }
  </code></pre>
  
  <p>The <code>result</code> from the <code>subscribe</code> is returning <code>true</code> but I am unsure about the logic on how to return from <code>canActivate</code> properly.  The code above gives the following error statement.</p>
  
  <blockquote>
    <p>Type 'Subscription' is not assignable to type 'boolean |
    Observable | Promise'.   Type 'Subscription' is not
    assignable to type 'Promise'.
        Property 'then' is missing in type 'Subscription'.</p>
  </blockquote>