title: Angular2 ChangeDetection or Observable?
body: <p>I'm having difficulty with a component that doesn't refresh upon log in.</p>
  
  <p>The component is navbar.component that contains links to my pages/components. On it, there is a "login" link that renders login.component on which I can provide username and password and click the login button. login.component uses user.service which calls the backend with the username and password provided by login.component, stores the received token and redirects to '/'.</p>
  
  <p>At this point, the "login" link on navbar.component should be hidden and the "logout" link shown, but nothing happens until I click one of the other links on the navbar.</p>
  
  <p>The 2 links are as follows:</p>
  
  <pre><code>&lt;a [hidden]="userService.isLoggedIn" [routerLink]="['Login']"&gt;Login&lt;/a&gt;
  &lt;a [hidden]="!userService.isLoggedIn" (click)="userService.logout();" href="javascript:void(0)"&gt;Logout&lt;/a&gt;
  </code></pre>
  
  <p>I understand storing the token and redirecting from user.service doesn't trigger change detection, and that my property userService.isLoggedIn isn't an observable, so I know I'm missing something, but not sure what the approach is/should be.</p>
  
  <p>I have tried injecting ApplicationRef to call the tick() method hoping this would trigger change detection, but failed.</p>
  
  <p>Should I make my property userService.isLoggedIn an observable?</p>