Nested angular google maps components don't render

I am using AGM (Angular Google Maps) and I want to create a set of my own custom components that wrap AGM components to allow high reuse within my app.

When I do this, however, the markers (in this example) don't seem to render on the map, yet I get no errors. I wonder if this is something to do with nesting the components within <ng-content>

Can anyone help? I have a stackblitz setup. Please see the updates at the bottom for an Angular 7 Stackblitz using Slot.

My core component is vmap

@Component({
  selector: "v-map",
  template: `<agm-map flex [latitude]="lat" [longitude]="lng">
                    <ng-content></ng-content>
                    <!--agm-marker [latitude]="lat" [longitude]="lng"></agm-marker-->
                </agm-map>`
})
export class VMapComponent {
  lat: number = 51.678418;
  lng: number = 7.809007;

  constructor(private loader: MapsAPILoader) {
  }
}

Note that if I comment back in the agm-marker in the template, it renders. It only seems to not work when within ng-content.

Here is the v-map-plots sub-component

@Component({
  selector: "v-map-plots",
  template: `<agm-marker *ngFor="let plot of plots" [latitude]="plot.Latitude" [longitude]="plot.Longitude"></agm-marker>`
})
export class VMapPlotsComponent {
  @Input() plots: IPlot[] = [];

  constructor(@Host() private parent: VMapComponent) {
    this.plots.push({ Latitude: 51.678418, Longitude: 7.809007 })
  }
}

Is this an AGM issue or an Angular issue? Is this related to ng-content? Is there a way around it?

Update As per @Anytoe's comment here is my use case:

<v-map>
  <v-map-plots [plots]="displayPlots"></v-map-plots>
</v-map>

The idea being I can make a number of reusable maps components that I can then reuse throughout my app where needed.

Update 2 I read about Slot and thought that could help me, so setup a new Stackblitz for Angular 7 and used slot but also could not get this working

from Nested angular google maps components don't render