# Angular8: BehaviourSubject partially not working when extracting to another Service

I encountered a really strange issue: in my application I followed the principle of having a state service handling all states. As the app is growing, I decided to create sub-state services. I extracted all related functions to a dedicatet service. Among others, this part was moved from state.service.ts to bubble03-state.service.ts:

@Injectable({
providedIn: 'root'
})
export class Bubble03StateService {

constructor() { }

/* tslint:disable:rule1 member-ordering */

// ...

public currentVisibleEFSubcontainer$= new BehaviorSubject<string>(''); private currentSubjectValue = ''; updateCurrentVisibleEFSubcontainer(newVisibleContainer: string): void { console.log(updating with value${newVisibleContainer});
if (newVisibleContainer !== this.currentSubjectValue) {
this.currentVisibleEFSubcontainer$.next(newVisibleContainer); this.currentSubjectValue = newVisibleContainer; } else { this.currentVisibleEFSubcontainer$.next('');
this.currentSubjectValue = '';
}
}

}


The method updateCurrentVisibleEFSubcontainer() is called from two locations, one is a component, one is another service. Now the strange part: as soon as I moved this code to the new sub-state service, only one call triggers the subscriptions, while the other call does not. I can’t really explain why, since its the exact same code, just in another place. All other moved functions work just fine. Following the two calls:

in a component

onClickRowElement(): void {
if (this.rowElementAmount > 0) {
this.bubble03State.updateCurrentVisibleEFSubcontainer(this.rowElementTitle);
this.rowElementClicked.emit(this.rowElementTitle);
}
}


in another service

chart.options.data[0].click = (e) => {
this.explodePie(e);
this.bubble03State.updateCurrentVisibleEFSubcontainer(e.dataPoint.name);
};


the subscription

this.bubble03State.currentVisibleEFSubcontainer$.subscribe( newVisibleEFContainer => { this.handleExpandableSubContainer(newVisibleEFContainer); console.log(newly visible${newVisibleEFContainer});
}
);


If the method is called a few times from the component, following output gets logged

> updating with value Kontoführung
> newly visible Kontoführung updating
> with value Versand & Bearbeitung
> newly visible Versand & Bearbeitung
> updating with value Versand & Bearbeitung
> newly visible


However, calling the methods from the service results in following log

> updating with value Kontoführung
> updating with value Versand & Bearbeitung
> updating with value Buchungsgebühren


As soon as I put the method and its corresponding BehaviourSubject back into the main service, everything works as intended. What could possibly cause this behaviour? There is no difference between the state services, except the name. Both are provided in root.

Source: New feed
Source Url Angular8: BehaviourSubject partially not working when extracting to another Service