[Angular] Communicate Between Components Using Angular Dependency Injection

Allow more than one child component of the same type. Allow child components to be placed within the views of other custom components.

In previous post, we have seen how to use @ContentChild to asscomplish compound component implementation.

It has some limitations, for example,

<toggle (toggle)="onToggle($event)">
  <toggle-on>On</toggle-on>
  <toggle-off>Off</toggle-off>
   <!-- Does not work when has multi children components -->
  <toggle-on>On</toggle-on>
  <toggle-off>Off</toggle-off>
 
  <!-- Does not work when there are some nested component -->
  <other-component></other-component>
  <toggle-button></toggle-button>
</toggle>

The reason for that is @ContentChild is only looking for the first matched child component, so that the only first child component get updated. Of course, we can use @ContentChildren with QueryList to solve the problem for multi child components, but @ContentChildren doesn't help with nested component.

So the solution is using Angular dependency injection, we want to inject 'ToggleComponent' into its child component. So that from the Child component, we can reference toggle component' state. For example:

toggle.on.component.ts:

import { Component } from '@angular/core';
 
import { ToggleComponent } from './toggle.component';
 
@Component({
  selector: 'toggle-on',
  template: '<ng-content *ngIf="toggle.on"></ng-content>',
})
export class ToggleOnComponent {
  constructor(public toggle: ToggleComponent) { }
}

We inject 'ToggleComponent' and inside the template, we reference toggle.on state form ToggleComponent.