Exploring the reactive pattern to share data

Angular services are powerful and efficient for creating common references to share both data and business logic between components. We will combine Angular services with Observables – more specifically, BehaviorSubject instances – to create stateful, reactive services that will allow us to synchronize the state efficiently across an entire application. So, in the following subsections, let’s explain the steps to implement a reactive pattern to share data between unrelated or sibling components.

Step 1 – Creating a shared service

First, we will create an Angular service called SharedDataService using the Angular CLI, as usual under the src/app/core/services folder:

ng g s SharedData

Note

Here, we named the service SharedDataService for demonstration purposes. While it’s true that we already have a service named RecipesService that could have accommodated the shared data, the purpose of this...