title: .subscribe to BehaviourSubject<any> not firing in Angular 5
body: <p>I am trying to subscribe to a service I am writing so I can update an <code>mat-autocomplete</code> input when a language dropdown is changed. </p>
  
  <p>the stackoverflow question I found is;</p>
  
  <p><a href="https://stackoverflow.com/questions/34376854/delegation-eventemitter-or-observable-in-angular/35568924#35568924">Delegation: EventEmitter or Observable in Angular</a></p>
  
  <p>However, when I implement this the subscription method is not firing? I have the following;</p>
  
  <p>My app.component.ts;</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { TranslateService } from '@ngx-translate/core';
  import { TranslationEmitterService } from '../../services/translation.emitter.service';
  
  @Component({
      selector: 'app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      providers: [ TranslationEmitterService ]
  })
  export class AppComponent {
      constructor(private translate: TranslateService, private translationService: TranslationEmitterService) {
          translate.addLangs(["en", "pt", "fr"]);
          translate.setDefaultLang('pt');
  
          let browserLang = translate.getBrowserLang();
          translate.use(browserLang.match(/en|pt|fr/) ? browserLang : 'en');
      }
  
  
  }
  </code></pre>
  
  <p>My Component html;</p>
  
  <pre><code>&lt;div class="dropdown"&gt;
      &lt;button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
          Select Language
      &lt;/button&gt;
      &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuButton"&gt;
          &lt;a class="dropdown-item" (click)="switchLanguage('pt')"&gt;&lt;span class="flag-icon flag-icon-gr"&gt;&lt;/span&gt; Portugese&lt;/a&gt;
          &lt;a class="dropdown-item" (click)="switchLanguage('en')"&gt;&lt;span class="flag-icon flag-icon-gr"&gt;&lt;/span&gt; English&lt;/a&gt;
          &lt;a class="dropdown-item" (click)="switchLanguage('fr')"&gt;&lt;span class="flag-icon flag-icon-gr"&gt;&lt;/span&gt; French&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Observable Service;</p>
  
  <pre><code>import { Injectable } from '@angular/core'
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  
  @Injectable()
  export class TranslationEmitterService {
      private _languageChangedSource = new BehaviorSubject&lt;any&gt;(0);
      languageChange$ = this._languageChangedSource.asObservable();
  
  
      changeLanguage(lang) {
          console.log("in change language " + lang);
          this._languageChangedSource.next(lang);
      }
  }
  </code></pre>
  
  <p>my component for switching the language which calls the change;</p>
  
  <pre><code>import { Injectable, Inject, Component } from '@angular/core';
  import { TranslateService } from '@ngx-translate/core';
  
  import { TranslationEmitterService } from '../../../services/translation.emitter.service';
  
  @Component({
      selector: 'nav-menu',
      templateUrl: './navmenu.component.html',
      styleUrls: ['./navmenu.component.css']
  })
  export class NavMenuComponent {
      public isCollapsed = true;
      public status = false;
  
      constructor(private translate: TranslateService, private translationEmitterService: TranslationEmitterService) {
  
      }
  
      public switchLanguage(language: string) {
          console.log("switching language");
          this.translate.use(language);
          this.translationEmitterService.changeLanguage(language);
      }
  }
  </code></pre>
  
  <p>and finally I subscribe to the event in my component;</p>
  
  <pre><code>ngOnInit() {
  
      this.translationSubscription = this.translationService.languageChange$.subscribe(
  
          // lang =&gt; this.refreshAutoCompleteItems(lang)
          x =&gt; console.log(x)
      );
  }
  </code></pre>
  
  <p>A copy of the component is here <a href="https://pastebin.com/dM82pZW3" rel="nofollow noreferrer">pastebin</a></p>
  
  <p>No when I trigger the <code>switchLanguage</code> method i get the output <code>switching language</code> and <code>in change language fr</code> output, but the component observing is not triggering?</p>
  
  <p>Can anyone tell me what I am doing wrong here?</p>