Chapter 10: Sharing Data between Components

Sharing data between components is a very common use case in web applications. Angular provides many approaches to communicate between parent and child components, such as the popular @Input and @Output decorator patterns. The @Input() decorator allows a parent component to update data in a child component. The @Output() decorator, on the other hand, 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 at all, 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 our requirement; then we will walk you through the different steps to implement the reactive pattern for sharing data between sibling components. Finally, we will highlight the other alternatives...