Angular — Using NgTemplateOutlet to communicate between parent and dynamic child components

The parent with dynamic children pattern is a common pattern in Angular that you may use when working on some complicated features, such as third party library integration. 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>