Chapter 8. Implementing component communications
This chapter covers
- Creating loosely coupled components
- How a parent component should pass data to its child, and vice versa
- Implementing the Mediator design pattern for component communication
An Angular application is a tree of views represented by components. While designing components, you need to ensure that they’re self-contained and at the same time have some means of communicating with each other. In this chapter, we’ll focus on how components can pass data to each other in a loosely coupled manner.
First, we’ll show you how a parent component can pass data to its children by binding to their input properties. Then, you’ll see how a child component can send data to its parent by emitting events via its output properties.
We’ll continue with an example that applies the Mediator design pattern to arrange data exchange between components that don’t have parent-child relationships. Mediator is probably the most important design pattern in any component-based framework.
Figure 8.1 shows a view that consists of components that are numbered and have different shapes for easier reference. Some of the components contain other components (let’s call the outer ones containers), and others are peers. To abstract this from any particular UI framework, we’ve avoided using HTML elements like input fields, drop-downs, and buttons, but you can extrapolate this into a view of your real-world application.