title: Nested angular google maps components don't render
body: <p>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.</p>
  
  <p>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 <code>&lt;ng-content&gt;</code></p>
  
  <p>Can anyone help? I have a <a href="https://stackblitz.com/edit/angular-google-maps-demo-2za2fg?file=app%2Fvmap.ts" rel="nofollow noreferrer">stackblitz</a> setup. Please see the updates at the bottom for an Angular 7 Stackblitz using <code>Slot</code>.</p>
  
  <p><strong>The TLDR:</strong> When I have nested custom components it creates an <code>ng-content</code> HTML element middle man which seems to break <code>agm</code> functionality.</p>
  
  <p>My core component is <code>vmap</code></p>
  
  <pre><code>@Component({
    selector: "v-map",
    template: `&lt;agm-map flex [latitude]="lat" [longitude]="lng"&gt;
                      &lt;ng-content&gt;&lt;/ng-content&gt;
                      &lt;!--agm-marker [latitude]="lat" [longitude]="lng"&gt;&lt;/agm-marker--&gt;
                  &lt;/agm-map&gt;`
  })
  export class VMapComponent {
    lat: number = 51.678418;
    lng: number = 7.809007;
  
    constructor(private loader: MapsAPILoader) {
    }
  }
  </code></pre>
  
  <p>Note that if I comment back in the <code>agm-marker</code> in the template, it renders.  It only seems to not work when within <code>ng-content</code>.</p>
  
  <p>Here is the <code>v-map-plots</code> sub-component</p>
  
  <pre><code>@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 })
    }
  }
  </code></pre>
  
  <p>Is this an AGM issue or an Angular issue?
  Is this related to <code>ng-content</code>? 
  Is there a way around it?</p>
  
  <p><strong>Update</strong>
  As per @Anytoe's comment here is my use case:</p>
  
  <pre><code>&lt;v-map&gt;
    &lt;v-map-plots [plots]="displayPlots"&gt;&lt;/v-map-plots&gt;
  &lt;/v-map&gt;
  </code></pre>
  
  <p>The idea being I can make a number of reusable maps components that I can then reuse throughout my app where needed.</p>
  
  <p><strong>Update 2</strong> I read about Slot and thought that could help me, so setup a new <a href="https://stackblitz.com/edit/angular-7-master-a7h2uz" rel="nofollow noreferrer">Stackblitz for Angular 7</a> and used slot but also could not get this working</p>