title: how to update profile picture in navbar component after upload new photo in profile component using angular 4?
body: <p>I'm using angular 4 and I have two components of navbar.component and profile.component. I can upload profile image from profile.component and in my navbar, I show the profile image. but when I upload an image in profile.component, the image won't be updated and I should refresh the page. how can i update it without page refresh?</p>
  
  <p>here is profile.component: </p>
  
  <pre><code>user['profile_pic'] = this.new_profile_pic_name;
  }
  this.authService.updateProfile(user).subscribe(data =&gt; {
    if (!data.success) {
      consolle.log('err')
    } else {
      console.log('success')
    }
  });
  </code></pre>
  
  <p>and this is navbar.component: </p>
  
  <pre><code>ngOnInit()
  {
  this.authService.userProfile().subscribe(user =&gt; {
    if (!user.success) {
      console.log('err')
    } else {
      this.user_id = user.user.rows[0].id;
      if (user.user.rows[0].profile_pic) {
        this.profile_pic = this.profile_pic_dir + 
         user.user.rows[0].profile_pic;
      }
    }
  });
  }
  </code></pre>
  
  <p>and navbar html: </p>
  
  <pre><code>&lt;button [md-menu-trigger-for]="user" md-icon-button class="ml-xs"&gt;
    &lt;img [src]="profile_pic" class="img" *ngIf="profile_pic"&gt;
    &lt;img src="assets/images/profile/no-pic.jpg" class="img" 
    *ngIf="!profile_pic"&gt;
  &lt;/button&gt;
  </code></pre>