title: How to update user image (on click) in navbar Angular
body: <p>I have navbar (code below) After setting *ngIf = "user" I try to display user avatar in the navbar but get that placeholder. After refreshing the page I get user avatar. So I'm wondering how i can refresh only navbar after clicking login button.</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-dark bg-primary"&gt;
   &lt;ul class="navbar-nav navbar-right"&gt;
      &lt;li *ngIf="!authService.loggedIn()" class="nav-item" [routerLinkActive] = "['active']" [routerLinkActiveOptions] = "{exact:true}"&gt;
        &lt;a  class="nav-link" [routerLink]="['/register']"&gt;Register&lt;/a&gt;
      &lt;/li&gt;
      &lt;li *ngIf="!authService.loggedIn()" class="nav-item"  [routerLinkActive] = "['active']" [routerLinkActiveOptions] = "{exact:true}" &gt;
          &lt;a class="nav-link"[routerLink]="['/login']"&gt;Login&lt;/a&gt;
      &lt;/li&gt;
      &lt;li *ngIf="authService.loggedIn()" class="nav-item avatar dropdown" style="cursor:pointer"&gt;
        &lt;a class="nav-link dropdown-toggle waves-effect waves-light" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
  
          &lt;img *ngIf="user" src="{{user.avatar}}" style="border-radius:15px; height:35px; width:35px;"&gt;
           &lt;img *ngIf="!user" src="http://res.cloudinary.com/dk34qvajk/image/upload/v1513190129/placeholder.png" style="border-radius:15px; height:35px; width:35px;"&gt; 
        &lt;/a&gt;
          &lt;div class="dropdown-menu dropdown-menu-right dropdown-purple" aria-labelledby="navbarDropdownMenuLink-5"&gt;
            &lt;a  class="dropdown-item waves-effect waves-light" [routerLink]="['/profile']"&gt;Profile&lt;/a&gt;
            &lt;a  class="dropdown-item waves-effect waves-light" [routerLinkActive]="['active']" [routerLink]="['/dashboard']"&gt;Dashboard&lt;/a&gt;
            &lt;a class="dropdown-item waves-effect waves-light" [routerLinkActive] = "['active']" [routerLinkActiveOptions] = "{exact:true}" (click)="onLogoutClick()" &gt;Logout&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>UPD</strong></p>
  
  <p>here is navbar.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AuthService } from '../../services/auth.service';
  import { Router } from '@angular/router';
  import { FlashMessagesService } from 'angular2-flash-messages';
  
  @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.css']
  })
  export class NavbarComponent implements OnInit {
  
   user: Object;
  
    constructor(private authService:AuthService, private router:Router, private flashMessage:FlashMessagesService) { }
  
  //added onInit body to get user object in navbar
  
  ngOnInit() {
     this.authService.getProfile().subscribe(profile=&gt;{
       this.user = profile.user;
     },
     err=&gt;{
      console.log(err);
      return false;
     });
  }
  
   onLogoutClick(){
     this.authService.logout();
     this.flashMessage.show('You are logged out', {cssClass: 'alert-success', timeout: 3000 });
     this.router.navigate(['/login']);
     return false;
   }
  }
  </code></pre>
  
  <p>and now here is auth.service.ts </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers } from '@angular/http';
  import 'rxjs/add/operator/map';
  import { tokenNotExpired } from 'angular2-jwt'
  
  @Injectable()
  export class AuthService {
    authToken : any;
    user : any;
  
    constructor(private http:Http) { }
  
    registerUser(user){
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      return this.http.post('http://localhost:17696/signup', user, {headers:headers})
        .map(res =&gt; res.json())
    }
  
    authenticateUser(user){
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      return this.http.post('http://localhost:17696/signin', user, {headers:headers})
        .map(res =&gt; res.json())
    }
  
    getProfile(){
      let headers = new Headers();
      this.loadToken();
      headers.append('Authorization', this.authToken)
      headers.append('Content-Type', 'application/json');
      return this.http.get('http://localhost:17696/users/profile', {headers:headers})
        .map(res =&gt; res.json())
    }
  
    storeUserData(token, user){
      localStorage.setItem('id_token', token);
      localStorage.setItem('user', JSON.stringify(user));    //cause local storage can store only strings not objects
      this.authToken = token;
      this.user =user;
    }
  
    loadToken(){
      const token = localStorage.getItem('id_token');
      this.authToken = token; 
    }
  
    loggedIn(){
      return tokenNotExpired('id_token');
    }
  
    logout(){
      this.authToken = null;
      this.user = null;
      localStorage.clear();
    }
  }
  </code></pre>
  
  <p>Also I've got some errors like <a href="https://i.stack.imgur.com/Iwh8N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Iwh8N.png" alt="this"></a> (cause trying to get profile  on initing navbar component)</p>