Angular nested components data flow with NGRX-Data

Question

I have a two components whith a shared service and the service is connected to an NGRX Data store. The Button-Component triggers a request via the service by calling the getByKey() method of NGRX-Data. The Display-Component has an Observable which is subscribed with the async pipe.

// Observable subscribed with async pipe
identifiers$: Observable<Identifiers> = new Observable<Identifiers>();

// Method called by the `Button-Component`
callApi(key) {
    // When this emits I want to map the value to `identifiers$`
    this.service.getByKey(key);
}

So far I'm not able to trigger the call with the Subscrption in the Display-Component. It works if I manually subscribe in the Service and the entities$ in the Store are updated too. I could use that but then I need some logic to store the key which I would like to avoid.

So how can I map from the Observable returned by the Store to the one of the Display-Component in one go?

Answer 1

The store is share for all child modules and their components, if you use .forRoot in AppModule then it means all the application is connected to the same store and shares its data.

In your case I would check the selector of identifiers$ to ensure what and how it receives because the described flow works in ngrx-data and doesn't require any additional changes.