title: Angular 6 change component if user is logged in
body: <p>Using a JWT based implementation and Angular 6, what is the best way to hide/show components based on whether a user is logged in or not? It would be nice to have an Observable user object that contains user related information. Does this require a Guard?</p>
  
  <p>The backend is using .NET Core 2.1, not sure if that makes a difference. Most of this code is pulled from an old Angular Firebase project I was using to learn Angular, but I switched to .NET Core for several reasons. It was nice to have real time updates about the user which was using all sorts of Angular + Firebase magic. Not sure how to repurpose this for .NET Core.</p>
  
  <p>The login and logout functions do work, just not including the details of those components for brevity. </p>
  
  <p>Here is what I have so far:</p>
  
  <p><strong>auth.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Router } from "@angular/router";
  import { Observable } from 'rxjs';
  
  interface User {
    email: string;
    password: string;
  }
  
  @Injectable()
  export class AuthService {
  
    user: Observable&lt;User&gt;;
    invalidLogin: boolean;
  
    constructor(
      private http: HttpClient,
      private router: Router
    ) { }
  
    login(e: string, p: string) {
      let credentials = { email: e, password: p}
      this.http.post("https://localhost:44368/api/auth/login", credentials, {
        headers: new HttpHeaders({
          "Content-Type": "application/json"
        })
      }).subscribe(response =&gt; {
        let token = (&lt;any&gt;response).token;
        localStorage.setItem("jwt", token);
        this.invalidLogin = false;
        this.router.navigate(["/dashboard"]);
        console.log('Access granted.');
      }, err =&gt; {
        this.invalidLogin = true;
        console.log('Access denied.');
      });
    }
  
    logout() {
      localStorage.removeItem("jwt");
      this.router.navigate(["/"]);
    }
  }
  </code></pre>
  
  <p><strong>my.component.html</strong></p>
  
  <pre><code>&lt;div *ngIf="auth.user | async; then authenticated else guest"&gt;
    &lt;!-- Template will replace this div --&gt;
  &lt;/div&gt;
  
  &lt;ng-template #guest&gt;
    &lt;p&gt;Guest&lt;/p&gt;
  &lt;/ng-template&gt;
  
  &lt;ng-template #authenticated&gt;
    &lt;p&gt;Authenticated&lt;/p&gt;
  &lt;/ng-template&gt;
  </code></pre>