title: How do to code an angular observable to return flat values when mapped
body: <p>I'm writing code where a customer is not allowed on a page if a value is set to true I now have working code but my gut tells me that it is not the most efficient use.</p>
  
  <p>The code is:</p>
  
  <pre><code>canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable&lt;boolean&gt; | Promise&lt;boolean&gt; {
      let bar= false;
      this.foo$.subscribe((x) =&gt; {
          bar = x;
      });
  
      return !bar;
  }
  </code></pre>
  
  <p>But I want it to look like this:</p>
  
  <pre><code>canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable&lt;boolean&gt; | Promise&lt;boolean&gt; {
      return this.foo$.subscribe((x) =&gt; {
          return x;
      });
  }
  </code></pre>
  
  <p>The problem is that it keeps returning a Observable if I use it like this and the canActivate function of the guard is not working whit this Observable.</p>