title: Automatically refresh navbar when service data changes
body: <p>I'm trying to make a login-logout navbar, which only shows the logout button when there is a user logged in, and only shows the Login button when there isn't any user logged in. I'm using firebase auth service and one of its functions detects whether there is a user logged in or not. I'm achieving this by putting an *ngIf on each button I want it to check, like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a *ngIf="!_auth.userData" routerLink="/auth/login" class="login active"&gt;Login&lt;/a&gt;
  &lt;a *ngIf="!_auth.userData" routerLink="/auth/register" class="register active"&gt;Register&lt;/a&gt;
  &lt;a *ngIf="_auth.userData" routerLink="/landing" class="landing active"&gt;Landing&lt;/a&gt;
  &lt;div class="divider anchor active"&gt;|&lt;/div&gt;
  &lt;li class="profile anchor active"&gt;Profile&lt;/li&gt;
  &lt;li class="paginator anchor active"&gt;Paginator&lt;/li&gt;
  &lt;li class="search anchor active"&gt;Search&lt;/li&gt;
  &lt;li class="ng-content anchor active"&gt;NgContent&lt;/li&gt;
  &lt;li class="footer anchor active"&gt;Footer&lt;/li&gt;
  &lt;div class="divider anchor active"&gt;|&lt;/div&gt;
  &lt;a *ngIf="_auth.userData" (click)="_auth.SignOut()" class="logout active"&gt;Logout&lt;/a&gt;
  &lt;a *ngIf="!_auth.userData" routerLink="/auth/forgot" class="forgot active"&gt;Forgot Password&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The actual login is inside the login component and has the next code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button [disabled]="loginForm.invalid" class="button" type="submit" (click)="_auth.SignIn(userEmail.value, userPassword.value)"&gt;Login&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The *ngIf detects the state of _auth.userData, this function returns null when no user is logged in.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    /* Saving user data in localstorage when 
      logged in and setting up null when logged out */
      this._afAuth.authState.subscribe(user =&gt; {
        if (user) {
          this.userData = user;
          localStorage.setItem('user', JSON.stringify(this.userData));
          JSON.parse(localStorage.getItem('user')!);
        } else {
          localStorage.setItem('user', "");
          JSON.parse(localStorage.getItem('user')!);
        }
      })
    }</code></pre>
  </div>
  </div>
  </p>
  <p>It works fine, but I have to refresh the page manually every time a login or logout in order for the navbar to refresh. How can I make it automatically refresh when the user logs in or logs out?</p>