title: Component interaction via service not working in Angular2
body: <p><br>
  I'm trying to set a value in one component, if a function is triggered in another component. 
  However, I can not get it to work. 
  <a href="https://stackoverflow.com/questions/37147826/passing-data-from-child-to-parent-component-child-loaded-via-routing">I am using the approach given in this post</a></p>
  
  <p>I would like my Sidebar to only show up after the Login-Button was pressed.</p>
  
  <p>I wrote a service component like this:<br>
  <code>component-interaction.service.ts</code></p>
  
  <pre><code>import { EventEmitter, Output } from '@angular/core';
  import { Injectable } from '@angular/core';
  
  @Injectable()
  export class ComponentInteractionService {
  
          showSidebarEmitter: EventEmitter&lt;any&gt; = new EventEmitter();
  
          setSidebar(showSidebar:boolean){
              this.showSidebarEmitter.emit(showSidebar);
          }
  
  }
  </code></pre>
  
  <p>and then I subscribe the components that would recieve the new values like this in my <code>sidebar.component.ts</code>: </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { ComponentInteractionService } from '../services/component-interaction.service';
  
  @Component({
    moduleId: module.id,
    selector: 'app-sidebar',
    templateUrl: 'sidebar.component.html',
  
    styleUrls: ['sidebar.component.css'],
     providers: [ ComponentInteractionService ]
  })
  
  export class SidebarComponent implements OnInit {
    showSidebar: boolean = false;
  
    constructor(private _router: Router,  private _componentInteractionService: ComponentInteractionService) { }
  
    ngOnInit() {
        this._componentInteractionService.showSidebarEmitter.subscribe(res =&gt;this.showSidebar = res);
  
    }
  
  }
  </code></pre>
  
  <p>and I'm setting the value in my <code>login.component.ts</code> like this:</p>
  
  <pre><code>import { Component, OnInit, EventEmitter, Output } from '@angular/core';
  import { Observable } from 'rxjs/Rx'; 
  import { ComponentInteractionService } from '../services/component-interaction.service';
  
  @Component({  
    moduleId: module.id,
    selector: 'app-login',
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.css'],
    providers: [ ComponentInteractionService ]
  })
  export class LoginComponent implements OnInit {
  
    login(){
     this._componentInteractionService.setSidebar(true);
    }
  }
  </code></pre>
  
  <p>now, since the value in my <code>sidebar.component.ts</code> is subscribed to the emit event it should be updated as soon as it is changed, should it not?</p>
  
  <p>Thank you for your help :)</p>