title: Sibling event communication in Angular 2
body: <p>I have five components in my project at the time which are</p>
  
  <pre><code>1: AppComponent (Main component)
  2: AuthComponent
  3: HomeComponent
  4: HeaderComponent
  5: FooterComponent
  </code></pre>
  
  <p>Html for "AppComponent" is</p>
  
  <pre><code>&lt;section class="app content-area"&gt;
  &lt;ng2-slim-loading-bar  [height]="'4px'"&gt;&lt;/ng2-slim-loading-bar&gt;
  &lt;fds-header *ngIf="_appDataService.isLoggedIn"&gt;&lt;/fds-header&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;fds-footer&gt;&lt;/fds-footer&gt;
  </code></pre>
  
  <p></p>
  
  <p>Now "HomeComponent" and "AuthComponent" is rendering in "router-outlet" and "AuthComponent" have method for login and logout. In "HeaderComponent" there is a button for logout and when it clicked I want to call logout method of "AuthComponent". Now here I cannot use "Template variable" for "AuthComponent" 
  <a href="https://stackoverflow.com/questions/39004684/angular-2-how-do-you-call-a-function-in-a-sibling-component">as answered there</a> because it is rendering in "router-outlet". So how it can be done? </p>