Chapter 6. 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 to create reusable components
- A component lifecycle
- Understanding change detection
We’ve established that any Angular application is a tree of components. While designing components, you need to ensure that they’re reusable and self-contained and at the same time have some means for 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 child by binding to the input properties of the child. 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. The Mediator pattern is probably the most important pattern in any component-based framework. Finally, we’ll discuss the lifecycle of an Angular component and the hooks you can use to provide application-specific code that intercepts important events during a component’s creation, lifespan, and destruction.