Introduction to Sharing Data between Components

Sharing data

Sharing data between components is a very common use case in web applications. Angular provides many approaches to communicating 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’ll start by explaining our requirements, then we’ll walk you through the different steps to implement the reactive pattern for sharing data between sibling components. Finally, we’ll highlight the other alternatives for sharing data and handling your application’s state.

Defining the requirement

Let’s assume that we have components (C1, C2, C3, and C4) that don’t have any relationship with each other, and there’s information (data) shared between those components.