[SOLVED] Angular Google Maps – polyline works on Stackblitz but not locally

Angular Google Maps – polyline works on Stackblitz but not locally

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.

Solution

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>