title: Angular 2 - Event from service to component at same level
body: <p>I have an Authentication service that emits an event. When user logs in (via a LoginComponent), nav bar has to be updated (NavBarComponent) . These components are at the same level</p>
  
  <p>First I tried to use EventEmitter, then I read we should not use it in a service. That is an anti-pattern. </p>
  
  <p>So I tried <a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service</a></p>
  
  <p><strong>auth.service.ts</strong></p>
  
  <pre><code>import {Injectable}     from '@angular/core';
  import { Subject }    from 'rxjs/Subject';
  
  @Injectable()
  export class AuthService {
  
    private connectionState: boolean;
    private stateChangeSource = new Subject&lt;boolean&gt;();
    // Observable boolean stream
    stateChange$ = this.stateChangeSource.asObservable();
  
    constructor(private http: Http) {
    }
  
    changeConnectionState() {
      this.stateChangeSource.next(!this.connectionState);
    }
  }
  </code></pre>
  
  <p><strong>login.component.ts</strong></p>
  
  <pre><code>import {Component, Inject} from '@angular/core';
  import {AuthService} from './auth.service';
  
  @Component({
    selector: 'login-component',
    templateUrl: './login.component.html'
  })
  export class LoginComponent {
  
    constructor(private authService: AuthService) {
      this.authService = authService;
    }
  
    login () {
      this.authService.changeConnectionState();
    }
  }
  </code></pre>
  
  <p><strong>navbar.component.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  import {AuthService} from './auth.service';
  
  @Component({
    selector: 'navbar',
    templateUrl: './navbar.component.html',
    providers: [AuthService]
  })
  export class NavbarComponent {
  
    authService: AuthService;
    connectionState: boolean;
    subscription: any;
  
    constructor(private authService: AuthService) {
      this.authService = authService;
      this.subscription = authService.stateChange$.subscribe(
        value =&gt; {
          this.connectionState = value;
        })
    }
  
    ngOnDestroy() {
      this.subscription.unsubscribe();
    }
  }
  </code></pre>
  
  <p><strong>navbar.component.html</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
  ...
      &lt;a *ngIf="!connectionState" [routerLink]="['/login']"&gt;Connect&lt;/a&gt;
      &lt;a *ngIf="connectionState" (click)="disconnect()"&gt;Disconnect&lt;/a&gt;
  ...      
  &lt;/nav&gt;
  </code></pre>
  
  <p>When I call </p>
  
  <blockquote>
    <p>this.authService.changeConnectionState();</p>
  </blockquote>
  
  <p>from NavbarComponent, navbar is correctly updated.
  But I would like to change the connection state from the loginComponent, then update the navbar. How can I do ?</p>
  
  <p><a href="https://i.stack.imgur.com/d173u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d173u.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT</strong> :</p>
  
  <p>Event is received in NavBarComponent :</p>
  
  <pre><code>this.subscription = authService.stateChange$.subscribe(
        value =&gt; {
          this.connectionState = value;
        })
  </code></pre>
  
  <p>But value is not updated in template. I have to change route in order to have the right value of 'connectionState'</p>