title: Angular2 how to update image in another component
body: <p>I am having two components one is of top-bar and another for profile management page.</p>
  
  <p>The issue is on updating the profile image it should also get changed from top-bar header also. It does but on page reload. I want it to be on instant.</p>
  
  <p>For this I can do this if I hit a function in top-bar component and alter variable that shows image. But I am unable to figure out that how I can do so I mean if image is updated in a my-profile component then how I can call a function of top-bar component and change the value of variable. </p>
  
  <p>What I tried is:</p>
  
  <p><strong>top-bar.component.ts :</strong></p>
  
  <pre><code>@Component({
  
  
  selector: 'top-bar',
    templateUrl: './top-bar.component.html',
  })
  export class TopBarComponent {
       @Output() myEvent = new EventEmitter();
         test()
      {
      console.log("in test");
      }
     }
  </code></pre>
  
  <p><strong>my-profile.component.html:</strong></p>
  
  <pre><code>&lt;top-bar #modal&gt;&lt;/top-bar&gt;
      &lt;top-bar (myEvent)="modal.test()"&gt;&lt;/top-bar&gt;
  </code></pre>
  
  <p>I am expecting that on my-profile page load I should get console.log("in tets");. Please correct me if wrong and how can i achieve so. Thanks in </p>
  
  <p>I have imported top-bar component in my-profile component already</p>