Angular - subject observable not responding

Question

I have one service SelectorService where I have defined the subject and an observable.

private eventEligibleApiStatus = new Subject<any>();
public eventEligibleApiStatusUpdated$ = this.eventEligibleApiStatus.asObservable();

And I have defined a method which calls the subject.next.

notifyEventEligibleApiStatus(status) {
  this.eventEligibleApiStatus.next(status);
}

Now in another component called scheduler-component.ts, I have defined one boolean flag and an observable

  eventEligibleInProgress = false;

  eventEligibleListener: Observable<any> = this.resourceSelectorService.eventEligibleApiStatusUpdated$;

And I am subscribing to this observable

   this.eventEligibleListener.subscribe( status => {
     this.eventEligibleInProgress = status;
   });

From SelectorComponent, I am calling the SelectorService's, notifyEventEligibleApiStatus like this,

this.selectorService.notifyEventEligibleApiStatus(true);

whenever the notifyEventEligibleApiStatus function is triggered, the control does not come to the eventEligibleListener.subscribe and the flag is also not changed.

What am I doing wrong here.

PS: I am new to Angular and Front End development.

Answer 1

May be SelectorService is not SingleTon and creating different object for each component. One way you can try @Injectable({ providedIn: 'root' }) this will create SingleTon object and same object will be shared across the components.

Answer 2

You have not declared eventEligibleApiStatus subject in your code. You have shared bits of codes. Try sharing complete code so that we can have a better understaning instead of guessing.

Try using behaviourSubject

private eventEligibleApiStatus = new BehaviorSubject<any>(null);
public eventEligibleApiStatusUpdated$ = this.eventEligibleApiStatus.asObservable();