title: Angular 2: Call existing component from another component
body: <p>I'm creating an app with Angular 2 using the routing features, and I have a popup component that is rendered by one of the higher up routes, and I want to open it on a click event in a component that is rendered by one of the deeper routes.</p>
  
  <p>For example, let's say I have a base router with a template containing the popup:</p>
  
  <pre><code>@Component({
      selector: 'application',
      template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;&lt;popup-component&gt;&lt;/popup-component&gt;',
      directives: [PopupComponent]
  })
  @RouteConfig([
      { ... },
      { ... }
  ])
  export class AppRoute { }
  </code></pre>
  
  <p>And a simple popup component with an open method:</p>
  
  <pre><code>@Component({
      selector: 'popup-component',
      template: '&lt;div [class.show]="isVisible"&gt;This is a popup.&lt;/div&gt;'
  })
  export class PopupComponent {
      public isVisible: boolean = false;
      show() {
          this.isVisible = true;
      }
  }
  </code></pre>
  
  <p>How can I call this show method on that specific PopupComponent that was already rendered by the AppRoute from another component that resides somewhere down in the routing tree?</p>
  
  <p>I have tried using dependency injection like this:</p>
  
  <pre><code>@Component({
      selector: 'my-component',
      template: '&lt;button (click)="showPopup()"&gt;&lt;/button&gt;'
  })
  export class MyComponent {
      constructor(private popup: PopupComponent) { }
      showPopup() {
          this.popup.show();
      }
  }
  </code></pre>
  
  <p>But this just creates a new instance of the PopupComponent that isn't actually rendered yet. How can I call the one that is rendered by the AppRoute?</p>