How do I create a shared data object between two angular components with updates

Question

I want to create a queue of objects which is shared between two components in the same module. Also, as soon as there are new objects inserted or deleted from the queue, the changes should reflect in both the components.

I will push or pop from the queue using buttons and associated functions in both of those components.

How do I achieve this?

Angular 9
NodeJS 12.18

Answer 1

1. Add a service to the module (both component will be able to inject)
2. Use RxJs queue and expose it (or a subset of it) as the service API