Observable/BehaviorSubject not working in different modules of Angular

Question

I have 1 feature module (Fund module) that displays fund data in one of its components and an AppModule that displays Advisor data. Fund data and Advisor data have one to many relationship. Fund component gets data from services defined in the AppModule.

Data are passed to the Fund module using BehaviorSubject as data might change if the user updates or modifies the data in AppModule. The subscription of the data in not working correctly. The fund module only displays the value (10) that the BehaviorSubject is initialized with. It doesn't display the updated value (100), nor does the subscription work properly to display the values second time.

Here's the code:

Service in AppModule:

test = new BehaviorSubject<number>(10);

getTest(): Observable<number> {
  return this.test.asObservable();
}

public updateLocalData(sleeves: Sleeve[]): void {
  .... update logic
  this.test.next(100);
}

FundDataComponent in Fund Module

changeDetection: ChangeDetectionStrategy.OnPush,

   ngOnInit(): void {
    this.test = this.service.getTest().subscribe((number) => {
      this.number = number;
      console.log(number);    // get's called only once to display 10
    });
  }

Answer 1

Create a model - resource.ts:

import { BehaviorSubject, Observable } from 'rxjs';
import { refCount, publishReplay } from 'rxjs/operators';

export class StreamResource {
   private loading = false;
   private behaviorSubject: BehaviorSubject<any>;
   public readonly obs: Observable<any>;

   constructor(defaultValue?: any) {
       this.behaviorSubject = new BehaviorSubject(defaultValue);
       this.obs = this.behaviorSubject.asObservable().pipe(publishReplay(1), refCount());
   }

   request(method: any): void {
       if (method && !this.loading) {
           this.loading = true;
           method().toPromise().then((data: any) => {
               if (data) { this.update(data); }
               this.loading = false;
           });
       }
   }

   getValue() {
       return this.behaviorSubject.getValue();
   }

   update(data: any) {
       this.behaviorSubject.next(data);
   }

   refresh() {
       const data = this.getValue();
       if (data) { this.update(data); }
   }
}

Create a StreamService

import { StreamResource } from '../models/resource';
public test = new StreamResource(10);

...

getTest() {
    this.test.request(() => this.testService.getTest());
}

How to use?

  constructor(private streamService: StreamService) { }

  ngOnInit() {
    this.streamService.test.obs.subscribe((data: any) => {
      if (!data) {
        return this.streamService.getTest();
      } else {
        this.test = data;
      }
    });