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"

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