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.

The TLDR: When I have nested custom components it creates an ng-content HTML element middle man which seems to break agm functionality.

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: &lt;agm-marker *ngFor="let plot of plots" [latitude]="plot.Latitude" [longitude]="plot.Longitude"&gt;&lt;/agm-marker&gt;

})

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 7and used slot but also could not get this working

#angular #google-maps