Angular Google Maps – polyline works on Stackblitz but not locally - angular-google-maps

Question

I need to wrap a div tag inside of an agm-polyline so it will accommodate both an ngFor and ngIf directive on the same agm-polyline-point tags. Example:
<agm-polyline [strokeColor]="'blue'">
<div *ngFor="let waypoint of waypoints">
<agm-polyline-point *ngIf="boolean" [latitude]="waypoint.lat" [longitude]="waypoint.lng"></agm-polyline-point>
</div>
</agm-polyline>
Adding the wrapped div results in the polyline no longer showing up in my browser when accessing on my computer from localhost:4200. However, when I run the code on Stackblitz it works perfectly.
Any ideas why this is happening? I've tried it locally on two versions of #agm/core (1.0.0 and 3.0.0-beta.0) with the same results each time.
Github is here.

Answer 1

Use ng-container instead of div.
When you use div tags, they are inserted into the DOM, which can interfere with the styling and structure of the page.
In contrast, ng-container tags are excluded from the DOM, but can use ngIf and other Angular constructs just as you are now.
<agm-map [latitude]="lat" [longitude]="lng">
<agm-polyline [strokeColor]="'blue'">
<ng-container *ngFor="let waypoint of waypoints">
<agm-polyline-point *ngIf="boolean" [latitude]="waypoint.lat" [longitude]="waypoint.lng"></agm-polyline-point>
</ng-container>
</agm-polyline>
</agm-map>