Angular2 detect change in service

Question

I have one component in Angular2 which is changing a "lang" class variable in my service translate.service.ts. In another component I am fetching a dict with the translation on init. If the first component changes the services language later, I want to refetch the dict in the second component automatically. How do I do that?

First component:

  setLang(lang) {     this._translateService.setLang(lang);   } 

Service:

dict = { "en": {}}; lang = "en";  setLang(lang) {     this.lang = lang; }  getLang() {     return this.dict; } 

Second component:

ngOnInit() {     this.dict = this._translateService.getDict(); } 

Answer 1

Edit:

Following the Mark's comment, a Subject / Observable should be preferred:

EventEmitter should only be used for emitting custom Events in components, and that we should use Rx for other observable/event scenarios.

Original Answer:

You should use an EventEmitter in the service:

export class LangService {   langUpdated:EventEmitter = new EventEmitter();    setLang(lang) {     this.lang = lang;     this.langUpdated.emit(this.lang);   }    getLang() {     return this.dict;   } } 

Components could subscribe on this event to be notified when the lang property is updated.

export class MyComponent {   constructor(private _translateService:LangService) {   }    ngOnInit() {     this._translateService.langUpdated.subscribe(       (lang) => {         this.dict = this._translateService.getDict();       }     );   } } 

See this question for more details:

• Delegation: EventEmitter or Observable in Angular
• Delegation: EventEmitter or Observable in Angular