Nested angular google maps components don't render

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.

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

How to Integrate Google Maps in Angular 10 Application

Learn how to work with Google Maps in the Angular 10 application. Learn how to create an interactive Google Map in Angular 10. We will learn how to add Google Maps using Google Maps API manually. We will use Angular Google Maps (AGM) Core plugin to embed the map in the Angular 10/9 application. It is a superb plugin to create Google Maps components in Angular.

How to use Google Maps in Angular?

Learn the easiest way to use Google Maps in Angular

Angular 8 Google Maps Tutorial with Example

In this article, you'll learn how to integrate Google Maps in Your Angular 8 Application using this example. In this Angular Google Maps integration tutorial, we would love to share each things step by step with example.

Getting started with Angular Google Maps component

The new Angular Component release introduces the second official @angular/component component, a Google Maps component. In this post, we take a look at getting started with the Angular Google Maps component.