Sharing Data between Angular Components

Sharing data between components is a very common use case in web applications. Angular provides many approaches for communicating between parent and child components, such as the popular @Input() and @Output() decorator patterns. The @Input() decorator allows parent components to provide data to their child components, while the @Output() decorator allows the child component to send data to a parent component. That’s great, but when data needs to be shared between components that are either deeply nested or not immediately connected, those kinds of techniques become less efficient and difficult to maintain.

So, what’s the best way to share data between sibling components? This is the heart of this chapter. We will start by explaining the sharing data requirement, before walking through the different steps to implement the reactive pattern for sharing data between sibling components in our app. Finally, we will introduce Angular...