title: Angular.io / Angular 4. How do I refresh one component view when triggering another
body: <p>I have a simple Angular.io app. (angular-cli / 4.1.0) </p>
  
  <p>I have a NavbarComponent that renders the username.</p>
  
  <p>When accessing the app the first time I am not logged in and my app redirects to the LoginComponent. My NavBar is also rendered but without a username. After successful login I am redirected to my HomeComponent.</p>
  
  <p>And here is the problem. My NavBar does not show the username. But if I do a refresh/ctrl+r the username is rendered.</p>
  
  <p>What is wrong?</p>
  
  
  
  <p>app.component.html</p>
  
  <pre class="lang-ts prettyprint-override"><code>&lt;nav-bar&gt;&lt;/nav-bar&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>navbar.compoment.ts</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'nav-bar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
  })
  export class NavbarComponent implements OnInit {
  
    me;
  
    ngOnInit() {
      this.me = JSON.parse(localStorage.getItem('currentUser'));
    }
  }
  </code></pre>
  
  <p>login.component.ts</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  
  import { AlertService, AuthenticationService } from '../_services/index';
  
  @Component({
      moduleId: module.id,
      templateUrl: 'login.component.html'
  })
  
  export class LoginComponent implements OnInit {
      model: any = {};
      loading = false;
      returnUrl: string;
  
      constructor(
          private route: ActivatedRoute,
          private router: Router,
          private authenticationService: AuthenticationService,
          private alertService: AlertService) { }
  
      ngOnInit() {
          // reset login status
          this.authenticationService.logout();
  
          // get return url from route parameters or default to '/'
          this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
      }
  
      login() {
          this.loading = true;
          this.authenticationService.login(this.model.email, this.model.password)
              .subscribe(
                  data =&gt; {
                      this.router.navigate([this.returnUrl]);
                  },
                  error =&gt; {
                      this.alertService.error(error);
                      this.loading = false;
                      this.errorMsg = 'Bad username or password';console.error('An error occurred', error);
                  });
      }
  }
  </code></pre>