2

I have two components A and B, and when an event occurs in A, I need to get the updated value in B in which I am subscribing to a service to get the latest value from A.

component A:

sendString(inputEntered){  //happens when on buttonclick
....
this.myService.sendRecent(inputEntered);
}

Service:

export class myService {
  private inputStringSource = new Subject<string>();
  public inputString$ = this.inputStringSource.asObservable();
  constructor() {}


  sendRecent(inputString: string) {
    this.inputStringSource.next(inputString);
  }

component B:

...

  ngOnInit(): void {

    this.myService.inputString$.subscribe(data => {
      console.log("input value ", data);
    });

Service is receiving new value but the subscription in component B is not being triggered.. what am I doing wrong here? Please let me know. Tried few option but still no luck.

Reddy
  • 21
  • 2
  • 1
    Have you tried with `BehaviorSubject` instead of `Subject` ? For Subject to work at the point of time where you `next` something to it your component B should already "listen" otherwise data will be lost. – robert Jul 29 '21 at 16:47
  • Check this [demo](https://stackblitz.com/edit/angular-ivy-pg1rnp?file=src%2Fapp%2Fb%2Fb.component.ts) it works as you described. – robert Jul 29 '21 at 17:45
  • I think the problem it's not related to the usage of the Subject instead of BehavioourSubject, maybe it's related to the action of firing the event it's not done correctly , this.myService.sendRecent() , can you share your code how it will be triggered – Rebai Ahmed Aug 01 '21 at 11:19

3 Answers3

4

This may happen if you are sending data from component A before subscribing in component B you can try using ReplaySubject

private inputStringSource = new ReplaySubject<string>();
jagjeet
  • 585
  • 2
  • 10
3

I think the problem might be with how you are importing service in your component. Now, since we don't have complete code reference, please make sure the module where you have put component B should not have service(myService in your example) in the providers list. BehaviourSubject subscribe works when the service is not explicitly mentioned in the providers of parent module.

sachintiwari
  • 31
  • 1
  • I bumped into this issue because of using standalone components. If importing the service inside standalone components, there could be multiple service instances that aren't sharing the same `BehavioralSubject`. – Woden Feb 04 '23 at 20:03
0

Change this and try:

import { BehaviorSubject } from 'rxjs';

private inputStringSource = new BehaviorSubject<string>('');

If it doesn't works, try this change the service like this:

export class myService {

  private inputStringSource = new Subject<string>();

  public get inputString$() {
     return this.inputStringSource.asObservable();
  }
  
  constructor() {}


  sendRecent(inputString: string) {
    this.inputStringSource.next(inputString);
  }
Juan Vicente Berzosa Tejero
  • 2,786
  • 2
  • 5
  • 15
  • Yes, I did try this before and tried it again, it did not work for me. – Reddy Jul 29 '21 at 17:12
  • I'm sorry it doesn't work for you, it's weird because I used it in that way sometimes. I've just add some change in my answer, for you to try in this new change in the service. I hope it'll work. – Juan Vicente Berzosa Tejero Jul 29 '21 at 17:59
  • thank you for your suggestions, I changed the code the way you have suggested, it still did not work, it is just not triggering the subscribe when the input string changes!! – Reddy Jul 29 '21 at 18:29
  • @Reddy see sachintiwari comment above. Make sure that both components share the service provided from the same module. [Provider] in the component triggers a new instance of the service, so you need to have the same instance of the service in both components provided by the parent module. – IHAFURR Oct 24 '22 at 10:04