title: Refresh Header after Login in Angular2
body: <p>So I have a header component that displays either the User's name or "Sign In" depending on whether they are logged in or not.  I also have a Login component that does all of the business logic of logging in.  They currently do not have a parent / child relationship.</p>
  
  <p>When the User logs in, the header does not refresh or change unless a full page refresh is done in the browser.  I've been doing a lot of searching and reading online about different ways to do this.  ngOnChanges, NgZone, ApplicationRef, and ChangeDetectorRef seem to be the most popular.  I'm trying to implement this behavior in ChangeDetectorRef as this seems to be most relevant to my situation.  However, I can't seem to find actual examples of how to use this.  </p>
  
  <p>I've coded it up but it does not seem to do anything.  Any advice would be appreciated.  I'd even accept that I'm taking the wrong approach and need to use another solution besides ChangeDetectorRef.</p>
  
  <p><strong>LoginComponent</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Response } from '@angular/http';
  import { Router } from '@angular/router';
  
  import { AuthenticationService } from '../service/authentication.service';
  
  @Component({
      selector: 'login-component',
      templateUrl: './login.component.html'
  })
  
  export class LoginComponent implements OnInit {
      constructor(private router: Router, 
                  private authenticationService: AuthenticationService) { }
  
      ngOnInit() {
          // Resets the login service.  
          // This is one of the events that should cause the refresh.
          this.authenticationService.logout();
      }
  
      login() {
          /*
          Authentication code
          This is the other event that should cause the refresh.
          */
      }
  }
  </code></pre>
  
  <p><strong>HeaderComponent</strong></p>
  
  <pre><code>import { ChangeDetectorRef, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
  
  import { Instance } from '../../entity/instance';
  
  @Component({
      selector: 'header-component',
      templateUrl: './html/header.component.html',
      changeDetection: ChangeDetectionStrategy.OnPush
  })
  
  export class HeaderComponent {
  
      userName: string;
  
      constructor(private ref: ChangeDetectorRef) {
          this.ref.markForCheck();
      }
  
      ngOnInit(): void {
          var currentUser = JSON.parse(localStorage.getItem('currentUser'));
  
          this.userName = currentUser &amp;&amp; currentUser.full_name;
  
          if (!this.userName) {
              this.userName = "User Name";
          }
      }
  }
  </code></pre>
  
  <p><strong>AppComponent</strong></p>
  
  <pre><code>import { ChangeDetectorRef, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
  
  import { Instance } from './entity/instance';
  import { InstanceService } from './service/instance.service';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      changeDetection: ChangeDetectionStrategy.OnPush
  })
  
  export class AppComponent implements OnInit {
  
      instances: Instance[];
  
      constructor(private instanceService: InstanceService) { }
  
      ngOnInit(): void {
      }
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;header-component&gt;&lt;/header-component&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>