how to subscribe to an Observable returned from ngrx's Entity Data Service

Question

i have a service called TransactionEntityService derived from EntityCollectionServiceBase for a model called Transaction.

export class TransactionEntityService
extends EntityCollectionServiceBase<Transaction> {

I am using TransactionDataService to override default behavior of DefaultDataService . In AppModule TransactionDataService is registered like this

    export class AppModule {
  constructor(
    private eds: EntityDefinitionService,
    private entityDataService: EntityDataService,
    private transactionsDataService: TransactionsDataService
  ) {
    eds.registerMetadataMap(entityMetadata);

    entityDataService.registerService('Transaction', transactionsDataService);
  }
}

and TransactionsDataService overrides getAll like below.

    export class TransactionsDataService extends DefaultDataService<Transaction> {
  constructor(
    http: HttpClient,
    httpUrlGenerator: HttpUrlGenerator,
    private notifyService: NotificationService
  ) {
    super('Transaction', http, httpUrlGenerator);
  }
  getAll(): Observable<Transaction[]> {
    return this.http
      .get<ApiResponse>('https://localhost:xxxx/transaction/GetLastSixMonth')
      .pipe(
        tap((data) => {
          this.notifyService.showSuccess(data.message, 'Sucess');
        }),
        map((res) => res.result),
        catchError((err) => {
          this.notifyService.showError(
            'Error While Six Month Transactions',
            'Error'
          );
          return of();
        })
      );
  }

The "$entitie" property of entity service is returning proper result after calling the api. and i am filtering that result to get count of something in an observable called last6MonthDepositCount$.

  this.last6MonthDepositCount$ = this.transactionsEntityService.entities$.pipe(
  map((transactions) => {
    const res = transactions.filter(
      (transaction) =>
        transaction.transactionType === TransactionType.Deposit
    ).length;
    return res;
  })//,
 // tap((val) => this.depositCount = val)
);

in the html i can use this observable

{{ last6MonthDepositCount$  | async }}

it works.

what should i do to use the value of this observable in another variable in my code ?

this.last6MonthDepositCount$.subscribe(x => this.dipositCount = x);

this kind of a code is not working. i get 0 in dipositCount which looks like the intial value of the observable.

Answer 1

Here Reactive paradigm is colliding with imperative one.

myChart.data.datasets[0].data gets called before this.last6MonthDepositCount$.subscribe(x => this.dipositCount = x); gives the final value.

What you need to do is :- initialize chartJs with initial/default value in ngAfterViewInit and also update myChartData in this.last6MonthDepositCount$.subscribe() method.

If you want to get results from 2 observables together, use combineLatest

const timerObservable1 = timer(0, 1000); 
    const timerObservable2 = timer(500, 1000); 
    const combinedTimers = combineLatest(timerObservable1, timerObservable2);
    combinedTimers.subscribe((value1, value2) => //DO something with both values together to update Chart);