Angular — Using component injection to communicate between parent and dynamic child components

The parent with dynamic children pattern is a common pattern in Angular for developing interdependent components with advanced features. Here I would like to explain with an example using Google map:

<google-map [key]="apiKey">
<google-map-marker *ngFor="let marker of markers"
[lat]="marker.lat"
[lng]="marker.lng">
</google-map-marker>
</google-map>

The <google-map> is the parent component, which initializes and renders the Google…