Why do I get different output in console when placing subscriber in component vs service file using behaviorsubject

Question

0.00/5 (No votes)

See more:

I am bit confused on the way BehaviourSubject is executed and looking for help. I have one component - my-component.ts and service file - my-service.ts. ButtonClicked() method is called from another component on click on button.

my-service.ts

myEventEmitter = new BehaviorSubject<string>('DEFAULT');

 ButtonClicked() {
   debugger;
   this.myEventEmitter.next("1st Value");

   debugger;
   this.myEventEmitter.next("2nd value");
}

my-component.ts

ngOnInit() {
  this.myServiceService.myEventEmitter.subscribe((value) => {
    debugger;
    console.log('Value 1 is ' + value);
  });
  this.myServiceService.myEventEmitter.subscribe((value) => {
    console.log('Value 2 is ' + value);
  });
}

Output of the above on console will be:

Value 1 is 1st Value
my-component.component.ts:21 Value 2 is 1st Value
my-component.component.ts:18 Value 1 is 2nd value
my-component.component.ts:21 Value 2 is 2nd value

BUT, IF I MOVE THE CODE FROM COMPONENT TO SERVICE FILE, I WILL GET DIFFERENT OUTPUT.

<pre>my-service.ts

myEventEmitter = new BehaviorSubject<string>('DEFAULT');

ButtonClicked() {
  this.myEventEmitter.next("1st Value");
  this.myEventEmitter.next("2nd value");

  this.myEventEmitter.subscribe((value) => {
    console.log('1:' + value);
  });
  this.myEventEmitter.subscribe((value) => {
    console.log('2:' + value);
  });
}

Output of the above on console will be:
my-service.service.ts:21 1:2nd value
my-service.service.ts:31 2:2nd value

What is the different between placing subscriber in component file vs in service file?
I am using Angular 17.3.9.

What I have tried:

I tried searching on youtube but got only videos on related to first approach.

Posted 19-May-24 6:21am

Codes DeCodes

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pete O'Hanlon · Accepted Answer · 2024-05-19T19:28:00

The reason you are seeing this is because you aren't actually testing the same thing. Let's go back to basics. A BehaviorSubject will replay the last value set, when you subscribe to it, and it will emit new messages when set. So, in your first code, you have separated out the subscription to the event from the emit. The bit you miss out, but the bit I have to assume is happening due to what you are seeing, is that the eventEmitter next is happening after the ngOnInit code is complete. In other words, you have finished subscribing to the event before values are emitted. You can easily see if this is happening by logging the method calls to the console. You should see ngOnInit happening before ButtonClick.

Now, with your second example, you have actually emitted the event before you subscribe to it. In other words, you are seeing the BehaviorSubject doing what it needs to do, and give you the last item emitted. The problem in your code isn't the way that BehaviorSubject works - there is no difference depending on where it's hosted. What you are seeing is down to a difference in the way you implemented your code.