Angular — Four Approaches to Implement Interdependent Components

Component is the basic building block of Angular applications. A typical Angular application is consisted of many separated components. Normally, each component usually represents one particular feature. Yet, there are some complicated features that need to use multiple components to implement, for example, DropDownComponent and DropDownGroupComponent:

<drop-down-group>
  <drop-down>...</drop-down>
  <drop-down>...</drop-down>
  <drop-down>...</drop-down>
</drop-down-group>

Data sharing is the most difficult part to solve when implementing this kind of interdependent components. Here I have summarized four common built-in approaches to tackle the communication problem.

Image from Deiser Blog

1. Component Injection

The simplest approach to establish a direct communication channel is through component injection from the children.

@Component(...)
export class DropDownComponent {
  constructor(
    parent: DropDownGroupComponent
  ) {
    ...
  }
  ...
}

Component injection is a very useful feature powered by the Angular dependency injection engine which allows developers to inject the reference of any ancestor in the constructor through the engine. This approach is potentially the cleanest way to implement…