title: How to refresh a component
body: <p>I have a simple Angular2 based web app, with authentication. I am running into an issue, where the navigation bar looks different based on whether the user is logged in or not, and also some components won't display when the user isn't logged in. </p>
  
  <p>The issue is, for example, when a user clicks <code>logout</code>, the navbar changes, but the other component doesn't disappear until the page is refreshed. How can I trigger a component refresh when the LogOut button is pressed?</p>
  
  <pre><code>//user.service.ts
    logout() {
      localStorage.removeItem('id_token');
      this.loggedIn = false;
    }
  
  //nav.component.ts
  import { Component, Inject } from 'angular2/core';
  import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
  
  import { UserService } from '../user/services/user.service';
  
  @Component({
    selector: 'nav-bar',
    template: `
    &lt;div class="nav"&gt;
      &lt;a [routerLink]="['LoginComponent']" *ngIf="!_userService.isLoggedIn()"&gt;Login&lt;/a&gt;
      &lt;a [routerLink]="['SignupComponent']" *ngIf="!_userService.isLoggedIn()"&gt;Sign Up&lt;/a&gt;
      &lt;a [routerLink]="['TodoComponent']" *ngIf="_userService.isLoggedIn()"&gt;ToDo&lt;/a&gt;
      &lt;button (click)="_userService.logout($event)" *ngIf="_userService.isLoggedIn()"&gt;Log Out&lt;/button&gt;
    &lt;/div&gt;
    `,
    styleUrls: ['client/dev/todo/styles/todo.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [ UserService ]
  })
  
  export class NavComponent {
  
      constructor(@Inject(UserService) private _userService: UserService) {}
  
  }
  </code></pre>
  
  <p>The nav component renders above whatever the router generates.</p>
  
  <p>How can I trigger components to reset?</p>