Subscribe method don't react to changes [Angular 2]

Question

I've got the method in my app.component that changes languages in my LangService. When the change occurs the LangService should then response with Observable object to all my other components as I have subscribed to changes in all my components. Unfortunately, it's not happening. It only response to the app.component that called the function for changing the language. I'm not sure where I have made a mistake. Maybe I'm just misunderstanding the whole concept as I'm new to Angular.

Here is the code:

app.component.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">                                           
        {{ title }}
      </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <ol class="breadcrumb">
          <li *ngFor="let lang of langs">
            <a (click)="changeLanguage(lang)">
              {{ lang }}
            </a>  
          </li>
        </ol>
      </ul>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core';
import './rxjs-operators';
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import { LangService } from './lang.service';
import { NotesComponent } from './notes/notes.component';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [NotesComponent, ROUTER_DIRECTIVES],
  providers: [LangService]
})
export class AppComponent {

  title = " Note App for BSC-Ideas";
  langs :Array<string> = ['EN', 'CZ'];

  constructor(
    private _langService :LangService
  ) {
    this._langService.activeLang$.subscribe(
      success => console.log('done') // It works here
    );
  } 

  changeLanguage(lang :string) :void{
    this._langService.changeLanguage(lang);
  }

}

some other.component.ts

import { Component, OnInit } from '@angular/core';
import { LangService } from '../lang.service';

@Component({
  moduleId: module.id,
  selector: 'all-notes',
  templateUrl: 'notes.component.html',
  providers: [NoteService, LangService]
})
export class NotesComponent implements OnInit {

  mode = 'Observable';

  constructor(private _langService :LangService) {}

  ngOnInit() {
    this.updatePhrases(this.postPhrases);

    this._langService.getUpdates().subscribe(
      success => console.log('is working') //Doesn't work here
    );
  }

}

LangService

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class LangService {
  activeLang = 'EN';
  private activeLangSubject = new Subject<string>();
  activeLang$ = this.activeLangSubject.asObservable();

  getUpdates() :Observable<Object>{
    return this.activeLang$.map(
      response => response || {}
    );
  }

  changeLanguage(lang :string){
    if(lang == 'EN' || lang == 'CZ'){
      this.activeLang = lang;
      this.activeLangSubject.next(lang);
    }
  }

}

Thank you for your help.

Answer 1

If you provide LangService on each component, each component will get its own instance.

Instead provide it only once at the root component or bootstrap(AppComponent, [LangService])

If you use RC.5 add it to providers: [LangService] of the @NgModule() then it will become a global service automaticall (except when it's a lazy loaded module, then you need to use forRoot())